如何修复警告：列表中的每个孩子都应该有一个唯一的“关键”道具

Posted 2023-02-19

【中文标题】如何修复警告：列表中的每个孩子都应该有一个唯一的“关键”道具

【英文标题】：How to fix Warning: Each child in a list should have a unique "key" prop

【发布时间】：2019-10-03 04:36:39

【问题描述】：

我正在使用 React、Redux 和 Firebase 创建一个简单的应用程序。 当我在浏览器中转到我的通知列表时，控制台中有一条警告消息

警告：列表中的每个孩子都应该有一个唯一的“key”道具。 检查“ProjectList”的渲染方法。

“ProjectList”是我的应用程序中的组件之一。

如何删除/修复此警告消息？

[![在此处输入图片描述][5]][5]

【问题讨论】：

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `ListView`的可能重复

【参考方案1】：

你只需要按照它说的去做，然后添加一个key。看起来您已经为每个 <ProjectSummary /> 添加了一个键，但是当您映射一个数组并返回一个组件列表时，键需要位于最外层的元素上——在本例中为 <Link key=project.id>

ProjectSummary 本身不需要它。

【讨论】：

你能告诉我代码我需要改变什么吗？我该怎么做。我是这个堆栈的初学者。谢谢布雷特

是的，就像我上面所说的，从 <ProjectSummary> 组件中删除 key=project.id 并将其添加到链接 - <Link key=project.id to='/project/' + project.id>。这是在 ProjectList.js 文件的渲染方法中 - 第 11 和 12 行。

【参考方案2】：

只需在最上面的 Element 添加 'key' 属性 并为其分配 index 值。在 map() 函数中添加索引作为参数。

 props.posts.map((post, index) => <ProjectSummary key=index name=post.name />)