为什么我无法访问 React 中对象数组中的键值

Question

我正在尝试创建一个应用程序，您可以在其中浏览食谱列表并单击食谱将其添加到您的收藏夹列表中。目前我的应用程序正在创建一张新卡，但该卡没有任何应有的信息，即名称或文本。不幸的是，你们都看不到照片，这是我将解决的另一个问题，但你们可以看到我试图传递到最喜欢列表的每张卡片上的其他信息。

顶级应用程序

import Favorites from "./Favorites";
import { Menu } from "./Menu";
import { Cards } from "./Cards";

import { useState } from "react";

import "./App.css";

function App() {
  const [favorite, setFavorite] = useState([]);
  const [array, setArray] = useState([
    {
      text: "Check 123",
      name: "Lahmacun",
      image: "./src/lahmacun.jpeg",
      id: self.crypto.randomUUID(),
      liked: false,
    },
    {
      text: "Check 456",
      name: "Chicken",
      image: "./src/chicken.webp",
      id: self.crypto.randomUUID(),
      liked: false,
    },
    {
      text: "Check 789",
      name: "Veggies",
      image: "./src/vegan.jpeg",
      id: self.crypto.randomUUID(),
      liked: false,
    },
    {
      text: "Check 012",
      name: "Pho",
      image: "./src/pho.jpeg",
      id: self.crypto.randomUUID(),
      liked: false,
    },
  ]);

  const handleLike = (card) => {
    setFavorite((prev) => [...prev, card]);
  };

  return (
    <div id="app">
      <h1>Recipes To Try</h1>
      <form className="m-2" action="">
        <div className="row">
          <div className="col-3 ">
            <label className="form-label pt-2" id="searchBar">
              Find A Recipe
            </label>
          </div>
          <div className="col-md-7 col-5">
            <input
              type="text"
              className="form-control"
              id="searchBar"
              placeholder="Search"
            />
          </div>
          <div className="col-sm-1 col-2">
            <button type="submit" className="btn btn-primary" id="searchBtn">
              Search
            </button>
          </div>
        </div>
      </form>
      <Favorites favorite={favorite} />
      <Menu array={array} handleLike={handleLike} />
    </div>
  );
}

export default App;

收藏夹组件

import { Cards } from "./Cards";

export default function Favorites({ favorite }) {
  return (
    <div id="favorites">
      <h1>Favorites</h1>
      {favorite.map((i) => (
        <div className="col col-md mb-3 mb-sm-0" key={i.id}>
          <div className="card">
            <img src={i.image} alt="" className="card-img-top " />
            <div className="card-body">
              <h5 className="card-title">{i.name}</h5>
              <p className="card-text">{i.text}</p>
              <a
                onClick={() => handleLike()}
                href="#"
                className="btn btn-primary"
              >
                Add to Favorites
              </a>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

菜单组件

import { Cards } from "./Cards";

export function Menu({ array, handleLike }) {
  return (
    <div id="menu">
      <div className="row">
        <div className="col">
          <h3 className="">Ready for Testing</h3>
        </div>
      </div>
      <div className="row">
        <Cards array={array} handleLike={handleLike} />
      </div>
    </div>
  );
}

卡片组件

export function Cards({ array, handleLike }) {
  return (
    <>
      {array.map((i) => (
        <div className="col col-md mb-3 mb-sm-0" key={i.id}>
          <div className="card">
            <img src={i.image} alt="" className="card-img-top " />
            <div className="card-body">
              <h5 className="card-title">{i.name}</h5>
              <p className="card-text">{i.text}</p>
              <a onClick={handleLike} href="#" className="btn btn-primary">
                Add to Favorites
              </a>
            </div>
          </div>
        </div>
      ))}
    </>
  );
}

感谢您的帮助！

我希望添加的卡片包含名称、文本、ID 和图像，但我只得到了一张带有按钮的卡片。

Answer 1

我检查了你的代码；看起来您正在调用一个函数来将某个食谱添加为最爱。 一切看起来都正确，但您的 favorites.jsx 组件中有一个愚蠢的错误。

您的职能是：

 const handleLike = (card) => {
    setFavorite((prev) => [...prev, card]);
  };

查看你的函数；你正在传递一个参数，它是“card”。但是，在您的 Favourites.jsx 组件中，您除了调用函数之外什么也没传递。

import { Cards } from "./Cards";

export default function Favorites({ favorite }) {
  return (
    <div id="favorites">
      <h1>Favorites</h1>
      {favorite.map((i) => (
        <div className="col col-md mb-3 mb-sm-0" key={i.id}>
          <div className="card">
            <img src={i.image} alt="" className="card-img-top " />
            <div className="card-body">
              <h5 className="card-title">{i.name}</h5>
              <p className="card-text">{i.text}</p>
              <a
                onClick={() => handleLike() // Nothing passed as an argument here.
                }
                href="#"
                className="btn btn-primary"
              >
                Add to Favorites
              </a>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

现在，我想你已经明白这个问题了。 在Favorite.jsx组件的onClick函数中

只需传递参数即可，即

i

。

修改后的代码：

{favorite.map((i) => (
  <div className="col col-md mb-3 mb-sm-0" key={i.id}>
    <div className="card">
      {/* ... */}
      <h5 className="card-title">{i.name}</h5>
      <p className="card-text">{i.text}</p>
      <a onClick={() => handleLike(i)} href="#" className="btn btn-primary">
        Add to Favorites
      </a>
    </div>
  </div>
))}

我希望这有帮助。有时可能会发生，所以不用担心。