反应错误：列表中的每个孩子都应该有一个唯一的“关键”道具答案

【问题标题】：React Error: Each child in a list should have a unique "key" prop反应错误：列表中的每个孩子都应该有一个唯一的“关键”道具
【发布时间】：2021-09-03 12:44:39
【问题描述】：

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

这是错误列表中的每个孩子都应该有一个唯一的“key”道具。

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

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

【问题讨论】：

Keys 帮助 React 识别哪些项目已更改、添加或删除。您应该在中使用 key={i}
@SifatAmin React 警告不要使用 map 的索引作为键，这就是为什么我假设 OP 正在使用对象中的数字。
我在 Id 或一些独特的身份。 @安迪
嗨尼萨尔！如你所知，我支持你。你愿意为我的回答点赞吗？谢谢，奥斯卡。

标签： javascript reactjs

【解决方案1】：

是的，您应该在渲染数组的任何时候添加一个 key prop。


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,index) => { 
                return ( 
                    <div key={index | the id of the todo}>
                        <DoItem const todo={todo} onDelete = {props.onDelete} /> 
                        <hr />
                    </div>
                    ) 
            })}
        </div>
    )
}

【讨论】：

【解决方案2】：

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, i) => { 
                return ( 
                    <key={i}>
                        <DoItem const todo={todo} onDelete = {props.onDelete} /> 
                        <hr />
                    </>
                    ) 
            })}
        </div>
    )
}

【讨论】：

是的，现在可以了！！但是我按照 youtube 视频中提到的步骤进行操作，那个人遇到了和我一样的问题，我的做法解决了这个问题。但是，我仍然收到错误，他继续前进。
嗯，实际上这不是一个致命错误，即使出现此错误，一切都会正常工作。谢谢。

【解决方案3】：

请为每个项目添加一个唯一的密钥

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

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

【讨论】：

嘿！这成功了！你能解释一下我的密钥方法有什么问题吗？
当然，您的地图将在您的容器中生成多个 > 元素，而无需任何键。这会出错。你清楚了吗？
键需要在第一个元素上，并且由于您使用的是片段，因此 React 会抛出错误，因为它实际上不是元素。
不，实际上我是按照 youtube 视频中提到的步骤操作的，那个人遇到了和我一样的问题，我的做法解决了。但是，我仍然收到错误
好的，所以如果我使用
而不是空我的方法不会出错？