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

问：

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

顶级应用

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 和图像，但我只得到了一张带有按钮的卡片。