如何为 React 列表中的每个项目生成唯一键？ [复制]答案

【问题标题】：How do I generate a unique key for each item in a list in React? [duplicate]如何为 React 列表中的每个项目生成唯一键？ [复制]
【发布时间】：2020-05-06 16:21:13
【问题描述】：

我在 React 中创建了一个简单的待办事项列表，即使我有一个 key 属性，我仍然收到错误消息“列表中的每个孩子都应该有一个唯一的“key”prop。”。

这是我的 JSX：

 <div className="list">
          <ul>
          {updatedList.map((item, index) => {
            return (
            <div>
              <li key={index}>{item}</li><button>delete</button>
            </div>
            )
          })}
          </ul>
        </div>

我的updatedList 的索引对于键值是否不够？我将如何将“li_ + {index}”之类的内容附加到每个键？

【问题讨论】：

updatedList 数组在这里看起来像什么？对于该数组中的每个待办事项，您必须有一个 id，对吧？

标签： javascript reactjs

【解决方案1】：

我建议不要将索引用作待办事项应用的键。您可能会从待办事项列表中删除某个项目。如果您使用索引作为键，这会弄乱您的 UI。您可以创建像 generateID() 这样的函数，它会返回一个唯一键。您可以使用 Math.random() 或 Date Api 或两者的组合来生成唯一密钥。

【讨论】：

我使用这个，当随机生成 1000 个项目时，我得到了重复的 id
我可以给你一些更随机的东西。但我认为你应该只为你的项目对象添加一个 id 键。所以你可以有一个具有这种结构的项目：- {id:'1',content:"do this"}。这会更好，因为即使您删除了一个 id 为“2”的项目，对于索引的情况下的 React 也不会模棱两可，如果您在第 2 个索引处删除项目，那么下一次将是第 3 个项目在第二个索引和 React 搞砸了。

【解决方案2】：

您需要将 key 属性分配给父容器。在根元素上。

<div className="list">
  <ul>
    {updatedList.map((item, index) => {
      return (
        <div key={index}>
          <li>{item}</li><button>delete</button>
        </div>
      )
    })}
  </ul>
</div>

【讨论】：

使用索引是个糟糕的主意。当你从数组中移除一个元素时会发生什么？
如果你从数组中删除一个项目，它会重新渲染这些东西。除了这个兄弟之外，您还要求错误，这就是错误。事件反应文档说明了同样的事情。

【解决方案3】：

你可以使用树技术，比如

 <div id="A" className="list">
      <ul id="B" >
      {updatedList.map((item, index) => {
        return (
        <div>
          <li key={'A'+'B'+index}>{item}</li><button>delete</button>
        </div>
        )
      })}
      </ul>
    </div>

【讨论】：

【解决方案4】：

       <div key={index}>
          <li >{item}</li><button>delete</button>
        </div>

键应该在第一个节点上

【讨论】：

【解决方案5】：

它仍然标记错误，因为您没有将键标记放在根元素上，而是放在li 上，它是div 的子元素，而您应该将它放在 div 元素上。

 <div className="list">
          <ul>
          {updatedList.map((item, index) => {
            return (
            <div key={index}>
              <li>{item}</li><button>delete</button>
            </div>
            )
          })}
          </ul>
        </div>
``\

【讨论】：