Fatal编程技术网
  • reactjs/
  • Reactjs 如何修复警告：列表中的每个子项都应该有一个唯一的；“关键”；道具

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

reactjs firebase redux

Reactjs 如何修复警告：列表中的每个子项都应该有一个唯一的；“关键”；道具,reactjs,firebase,redux,Reactjs,Firebase,Redux,我正在使用React、Redux和Firebase创建一个简单的应用程序。 当我在浏览器中转到通知列表时，控制台中会显示一条警告消息 警告：列表中的每个孩子都应该有一个唯一的“键”道具。 检查“ProjectList”的渲染方法 “ProjectList”是我应用程序中的一个组件 如何删除/修复此警告消息 [！[enter image description here][5][5]您只需按它所说的做，然后添加一个键。看起来您已经为每个添加了一个键，但是当您映射到一个数组并返回一个组件列表

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

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

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

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

[！[enter image description here][5][5]

您只需按它所说的做，然后添加一个
键。看起来您已经为每个
添加了一个键，但是当您映射到一个数组并返回一个组件列表时，该键需要位于最外面的元素上—在本例中是


项目摘要本身不需要它。
只需在最上面的元素添加“key”属性，并为其指定索引值即可。在map（）函数中添加索引作为参数


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



{props.posts.map（（post，index）=>）}

可能重复的代码能否告诉我需要更改的代码以及如何更改。我是这一叠的初学者。谢谢你，BrettYep，就像我上面说的，从
组件中删除
key={project.id}
，并将其添加到链接-
。这在ProjectList.js文件的render方法中-第11行和第12行。