警告 - 列表中的每个 child 都应该有一个唯一的 "key" 属性

Question

收到 警告：列表中的每个 child 都应该有一个唯一的“键”属性。我不知道我需要使用哪个键。

<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 改成了红色，但这并不能帮助我理解如何在我的案例中使用它

Answer 1

index 是一个数字，不是一个对象。 index 就够了。

key={index}

Answer 2

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

key={index.id}

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

key={index}

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

key={todos[index].id}

Answer 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)}
/>

警告 - 列表中的每个 child 都应该有一个唯一的 "key" 属性

Warning - Each child in a list should have a unique "key" prop

key

parent-child

reactjs