javascript - react 错误 : Each child in a list should have a unique "key" prop

Question

我是 React 的初学者。我写了这段代码并得到了一个错误

import { DoItem } from '../MyComponents/DoItem'
export const ToDo = (props) => {
    return (
        <div className="container">
            <h3 className="text-center">To Do List</h3>
            {props.todos.map((todo) => { 
                return ( 
                    <>
                        <DoItem const todo={todo} onDelete = {props.onDelete} /> 
                        <hr />
                    </>
                    ) 
            })}
        </div>
    )
}

这是错误列表中的每个 child 都应该有一个唯一的“关键” Prop 。

上网查了一下，发现必须要用key。我插入了 key
<DoItem const todo={todo} key={todo.nos} onDelete = {props.onDelete} />

但是在我重新加载页面后错误仍然没有消失。

Answer 1

请为每个项目添加唯一键

{props.todos.map((todo, index) => { 
                return ( 
                    <div key={index}>
                        <DoItem const todo={todo} onDelete = {props.onDelete} /> 
                        <hr />
                    </div>
                    ) 
            })}

请试一试，让我知道它是否有效。