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

Posted 2023-02-22

【中文标题】警告 - 列表中的每个孩子都应该有一个唯一的“关键”道具

【英文标题】：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

【参考方案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)
/>