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

我将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)}
/>

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

3 个答案: