React，列表中的每个 child 都应该有一个唯一的 "key" 道具

Question

我遇到过“列表中的每个 child 都应该有一个唯一的“关键”道具。”错误。我的用户数据不是动态的，所以我使用静态 ID 作为唯一密钥道具。

const App = () => {
  const meals = [
    {
      name: "Kimchi Fried Rice",
      info: "Delicious kimch and fresh veggies with rice",
      price: 10.99,
      id: 1,
    },
    {
      name: "Bibimbap",
      info: "Fresh veggies with spicy sauce ",
      price: 15.99,
      id: 2,
    },
    {
      name: "Ddeok bokki",
      info: "Chewy rice cake stirred with spicy sauce",
      price: 10,
      id: 3,
    },
    {
      name: "Son tofu",
      info: "The softest tofu soup ever ",
      price: 11.99,
      id: 4,
    },
  ];
  // console.log(meals.map((a) => a.name));
  return (
    <div>
      <Layout food={meals} />
    </div>
  );
};

const Layout = (props) => {
  return (
    <Card>
      <div className={classes.frame}>
        {props.food.map((menu) => (
          <ul>
            <li className={classes.name} key={menu.id}>
              {menu.name}
            </li>
            <li className={classes.info}>{menu.info}</li>
            <li className={classes.price}>{menu.price}$</li>
            <Button>+Add</Button>
          </ul>
        ))}
      </div>
    </Card>
  );
};

我最初制作了这个代码

        <li className={classes.name} key={menu.id}>
          {menu.name}
        </li>
        <li className={classes.info} key={menu.id}>
          {menu.info}
        </li>
        <li className={classes.price} key={menu.id}>
          {menu.price}$
        </li>

但是这个错误 -> Encountered two children with the same key, 1.密钥应该是唯一的，以便组件在更新期间保持其身份。 Non-unique 键可能会导致 children 被重复 and/or 省略 — 该行为不受支持，可能会在未来的版本中更改。我尝试使用 Math.random.().toString() 作为键，但它抛出了同样的错误。谁能告诉我我做错了什么？

Answer 1

错误消息中的列表指的是 Array.map() 呈现的项目列表。在您的例子中，每个 menu 项都是一个 ul 元素，因此错误消息的“列表中的子项”指的是 ul。将密钥移动到 ul:

{props.food.map((menu) => (
  <ul key={menu.id}>
    <li className={classes.name}>
      {menu.name}
    </li>
    <li className={classes.info}>{menu.info}</li>
    <li className={classes.price}>{menu.price}$</li>
    <Button>+Add</Button>
  </ul>
))}

React，列表中的每个 child 都应该有一个唯一的 "key" 道具

React, Each child in a list should have a unique "key" prop

key

reactjs

react-hooks