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

Question

得到一个警告：列表中的每个孩子都应该有一个唯一的“键”道具。我想不出我需要用哪把钥匙。

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

我红了反应指南，但它不能帮助我理解如何在我的情况下使用它

Answer 1

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

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

Answer 2

在代码中，您提到：

key={index.id}

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

key={index}

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

key={todos[index].id}

Answer 3

索引是一个数字，而不是一个对象。只要索引就足够了。

key={index}