React Js 警告：列表中的每个子元素都应该有一个唯一的 "key" 属性

Question

我收到了上述错误信息，即使我已经编写了关键的props，我仍然不理解，我该怎么办？ 我像图片中那样附上了我的代码

- Yahfi Ilham

---

也许你可以尝试将键放在片段上 https://reactjs.org/docs/fragments.html#keyed-fragments - Indana Rishi

每个条目的 todo.todo_id 是否唯一？似乎有一些重复的 ID。 - wentjun

Answer 1

问题在于您正在将键设置在不是循环根（重复的元素）上的元素上。

因此，您需要将键放在 <> 上，像这样：

{todos.map( todo => {
    return {
      < key={todo.todo_id}>
       .......

我会将其更改为div，但这只是我的观点：

{todos.map( todo => {
    return {
      <div key={todo.todo_id}>
       .......

- Skatox

Answer 2

您的地图中的每个元素都应该有一个唯一的键... 简单地说，您的元素 <>....</> 没有一个键属性... 而应该使用 React Fragment，例如： <React.Fragment key={todo.todo_id}/>...</React.Fragment> 这样每个元素 (React Fragment) 都有一个唯一的键 (确保 todo_id 是一个唯一的键)。当然，您可以使用 div，但如果您不想渲染一个 div，请使用 React Fragment。

- SharpInnovativeTechnologies

Answer 3

简述:

在map的回调函数中，你需要为最外层的jsx元素添加一个key。在你的情况下，这将是Fragment（<>）。这里是文档中带有一些示例的部分。

解释:

那么为什么React要我添加key呢？

React更喜欢为每个元素分配唯一的key，以便它可以跟踪哪些特定元素需要在下一次渲染中更新。这些键可以帮助精确地缩小需要更新的DOM部分范围。这是React的一个很棒的部分，它不会在每次重新渲染时重建整个DOM树，只会重建改变了的部分！

那么如果我不添加key会发生什么？

React将不知道需要更新的特定元素，被迫更新比它实际需要更新的更多的内容。

- Connor