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

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

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

标签： reactjskeyparent-child

Answer 1

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

key={index}