关于 bootstrap 卡片与 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”属性，我仍然在控制台中收到警告“列表中的每个 child 都应该有一个唯一的”key”属性。”

其次，即使我设置了“value”属性，当我每次点击登录到控制台时，我都会得到“undefined”。有人能帮忙吗？

Answer 1

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

2)卡片可能没有价值道具。而且它不是表单元素

将您的 onClick 替换为：

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

和

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

关于 bootstrap 卡片与 React 的混淆

Confusion about bootstrap Cards with React

reactjs

bootstrap-4