react_devtools_backend.js：2655 警告：列表中的每个孩子都应该有一个独特的"key"道具

Question

我知道错误了。它说我需要在代码的map()函数中放置一个key={object.id}。我有，但错误仍然显示在浏览器控制台上。知道为什么会这样吗?

<>
<section className="bg-light py-5">
<div className="container">
<div className="row justify-content-center">
<div className="col-lg-10">
<h1 className="post-archive-tag" >Recent Rants</h1>
{this.state.rants.map((rant) => (
<div key={rant.id} >
<Link className="post-archive-item" to={`/rant/${rant.slug}`}>
<h1>{ rant.title }</h1>
</Link>
{rant.categories.map((category) => (
<small className="post-archive-meta-details-name"><Link className="post-archive-meta-details-name text-dark font-weight-bold" to={`/category/${category.slug}`}>#{category.slug} </Link></small>
))}                                                                   
<hr className="my-4" />
</div>
))}
</div>
</div>
</div>
</section>
</>

Answer 1

确保您提供的键rant.id是div元素唯一的，因为很少有机会在相同的部分中使用键作为id进行循环，因此如果id不是mongo id，则id会被复制。

Answer 2

您需要指定唯一的键在每个地图函数的第一个标签上。我看到你有两张地图。一个映射到this.state.rants上，另一个映射到rant.categories上。

在rant.categories中你也需要为<small className="post-archive-meta-details-name" key={SOMETHING UNIQUE}>添加key prop