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

【问题标题】：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`的可能重复

标签： reactjs firebase redux

【解决方案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} />) }

【讨论】：