对带有 React 的引导卡的困惑

Question

我有以下代码：

import { Card, CardGroup } from "react-bootstrap";

function Woodcutting() {
  const trees = [
    {
      uID: "tree-normal",
      name: "Normal Tree",
      level: 1,
      interval: 3000,
      xp: 10,
      media: "tree.png",
    },
    {
      uid: "tree-oak",
      name: "Oak Tree",
      level: 5,
      interval: 4000,
      xp: 15,
      media: "tree.png",
    },
    {
      uID: "tree-magic",
      name: "Magic Tree",
      level: 10,
      interval: 5000,
      xp: 20,
      media: "tree.png",
    },
  ];

  function onCardClick(event) {
    console.log(event.target.value);
  }

  return (
    <CardGroup>
      {trees.map((tree) => (
        <Card
          style={{ width: "18rem" }}
          onClick={onCardClick}
          key={tree.uID}
          value={tree.uID}
          style={{ cursor: "pointer" }}
        >
          {/* <Card.Img variant="top" src="tree.png" /> */}
          <Card.Body>{tree.name}</Card.Body>
        </Card>
      ))}
    </CardGroup>
  );
}

export default Woodcutting;

我对一些事情有点困惑。

首先，即使我设置了“key”道具，我仍然会在控制台中收到警告说“列表中的每个孩子都应该有一个唯一的“key”道具。”

其次，即使我设置了“值”属性，当我在每次单击时登录到控制台时，我都会得到“未定义”。有人可以帮忙吗？

Answer 1

1)第二个对象的键“uID”输入错误导致键问题

2) Card 可能没有 value 属性。 而且它不是表单元素

将您的 onClick 替换为：

onClick={()=>onCardClick(tree.uID)}

和

 function onCardClick(uID) {
    console.log(uID);
  }