列表中的每个孩子都应该有一个唯一的“关键”道具错误，以 uuid 作为关键反应

Question

我得到一个“列表中的每个孩子都应该有一个唯一的“关键”道具。” 在控制台中专门（它引用第一行作为相关行）

<Dropdown.Menu variant="dark">
  {[
    [0, "prod_name", "Name"],
    [1, "price", "Price"],
    [2, "average_rating", "Rating"],
  ].map((item, i) => (
    <>
      <Dropdown.Item
        as={Button}
        key={uuid.v4()}
        onClick={() => {
          this.setState({ sort: item[0], open: false });
          this.context.sort(item[1], "asc");
        }}
        className={
          this.state.sort === item[0]
            ? "text-black giBold active"
            : "text-light"
        }
      >
        {item[2] + " (ascending)"}
      </Dropdown.Item>
      <Dropdown.Item
        as={Button}
        key={uuid.v4()}
        onClick={() => {
          this.setState({ sort: item[0] + 3, open: false });
          this.context.sort(item[1], "desc");
        }}
        className={
          this.state.sort === item[0] + 3
            ? "text-black giBold active"
            : "text-light"
        }
      >
        {item[2] + " (descending)"}
      </Dropdown.Item>
    </>
  ))}
</Dropdown.Menu>;
               

我将密钥更改为 uuid，因为我意识到大量不同项目的 id 将是相同的，希望它能修复错误但它不断弹出。

这里还有其他我错过的东西吗，我试图寻找答案，但找不到太多。

Answer 1

哦，你只需要在<>中添加 key ，因为 key 属性应该在map函数的渲染部分的第一个标签中，并将空标签更改为<div> ，因为空标签不能有任何属性。 您的代码应如下所示；

[...].map((item, i) => (
    <div key={uuid.v4()}> // this tag's key important for map function
      <Dropdown.Item
        as={Button}
        key={uuid.v4()}
        ...
      >
        {item[2] + " (ascending)"}
      </Dropdown.Item>
      <Dropdown.Item
        as={Button}
        key={uuid.v4()}
        ...
      >
        {item[2] + " (descending)"}
      </Dropdown.Item>
    </div>
  ))}
</Dropdown.Menu>;