Reactjs 警告：遇到两个子项具有相同的键，`[object]

亲爱的朋友们，希望你们一切顺利。 我已经用reactJs构建了一个简单的web应用程序，我收到了很多警告，我搜索了很多相同的问题，我无法找到任何解决方案，如果有人知道，请帮助。 这是密码

*index.js:1警告：遇到两个具有相同密钥的子项，

[object object]

。键应该是唯一的，以便组件保持 他们的身份跨越更新。非唯一键可能会导致子项 被复制和/或忽略-该行为不受支持且可能 在未来版本中进行更改

这是所有具有大多数警告的代码

返回(
编辑

删除

{username}
{标题}
{新日期（timestamp？.toDate（））.toutString（）}
{/*
{noLikes}喜欢
*/}

{noLikes}{noLikes==1？'Like'：'Likes'}


喜欢
评论
setComment（e.target.value）}
/>
按回车键发布
{comments.map（（comment）=>(

{comment.username}
{comment.text}

))}
);

---

是否需要创建唯一的键？

您提供了一个对象作为div的键，该div将由react转换为字符串[object object]。因此，所有映射元素都获得相同的密钥。出于性能原因，reacts需要映射列表的唯一键

有关[object]的详细信息，您可以在此处阅读：

此错误的一种解决方案是将密钥更改为唯一的字符串或数字

key={comment.username}或key={comment.id}应该可以解决这个问题。但是用户名和id应该是唯一的。

发生错误的原因是您可能会迭代您的

Post

组件，并且没有给它们一个唯一的

键

可以通过两种方式消除错误：-

在

Post

和

Post

组件中放置

键

：-

• 在

  Posts

  组件中：-

const Posts=（）=>{
返回(
{/*用户名={user？.displayName}*/}
{posts.map（{id，post}）=>(
)}
)
}

• 在

  Post

  组件中：-

constpost=（{postId}）=>{
返回(
{/*内容*/}
)
}

或者将

.map（）

完全移动到

Post

组件中

• 在

  Posts

  组件中：-

const Posts=（）=>{
返回(
{/*用户名={user？.displayName}*/}
)
}

• 在

  Post

  组件中：-

constpost=（{posts，otherProps}）=>{
返回(
{posts.map（{id，post}）=>(
{/*内容*/}
)}
)
}

不要将对象用作键。使用一个唯一的字符串，如comment.username或comment.id。非常感谢，兄弟，它解决了大多数警告，但我仍然有警告，在这一行的第133行#Domino987，我看不到您的行数。Where和what error如果其错误要求在

处输入

键

，则执行@Domino987建议的相同操作。您可以使用

post

标题

，或者更好地使用

post

的

id

作为

键

道具谢谢，兄弟，是的，我按照@Domino987做了，维护它解决了我的大部分错误，但我仍然有错误。

in div (at Post.js:133)
in Post (at Posts.js:34)
in div (at Posts.js:29)
in Posts (at App.js:62)
in div (at App.js:61)
in div (at App.js:59)
in Route (at App.js:57)
in Switch (at App.js:35)
in Router (created by BrowserRouter)
in BrowserRouter (at App.js:34)
in div (at App.js:33)
in div (at App.js:32)