警告 - 列表中的每个孩子都应该有一个唯一的“关键”道具答案

【问题标题】：Warning - Each child in a list should have a unique "key" prop警告 - 列表中的每个孩子都应该有一个唯一的“关键”道具
【发布时间】：2021-01-12 20:26:34
【问题描述】：

得到一个警告：列表中的每个孩子都应该有一个唯一的“key”道具。我不知道我需要使用哪个键。

<td className="banana-td">
                    {todos.map((todo, index) => (
                        <BananaBullet
                            key={index.id}
                            value={todo.date}
                            completed={todo.completed}
                            onClick={() => 
           toggleTodo(todo.id)}
                        />
                    ))}
                </td>

                <td className="task-td">
                    {todos.map((todo, index) => (
                        <TodoContainer
                            key={index.id}
                            text={todo.text}
                            completed={todo.completed}
                            toggleTodoItem={() => 
          toggleTodo(todo.id)}
                        />
                    ))}
                </td>
                <td>
                    {todos.map((todo, index) => (
                        <DeadlineList
                            key={index.id}
                            value={todo.date}
                            completed={todo.completed}
                            onClick={() => 
                 toggleTodo(todo.id)}

我标记了react guidelines，但这并不能帮助我理解如何在我的情况下使用它

【问题讨论】：

这能回答你的问题吗？ Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `ListView`
codesandbox.io/s/frosty-night-pytse?file=/src/components/…
是的，它可以正常工作：97pp0.csb.app

标签： reactjs key parent-child

【解决方案1】：

index 是一个数字，而不是一个对象。只需index 就足够了。

key={index}

【讨论】：

【解决方案2】：

在您的代码中，您提到了：

key={index.id}

这不起作用，因为key 是一个数字/整数。您需要做的就是：

key={index}

如果我明白你想要做什么，那么你应该这样做：

key={todos[index].id}

【讨论】：

【解决方案3】：

看起来您的todo 对象上有一个唯一字段（id），因此您可以输入todo.id 作为键。这比使用索引值要好得多，因为 React 可能会在状态更新期间与排序混淆。为BananaBullet、TodoContainer 和DeadlineList 执行此操作。例如：

<BananaBullet
  key={todo.id} // change here
  value={todo.date}
  completed={todo.completed}
  onClick={() => toggleTodo(todo.id)}
/>

【讨论】：