react_devtools_backend.js:2655 警告：列表中的每个孩子都应该有一个唯一的“关键”道具

Question

我知道错误。它说我需要在代码的

key={object.id}

函数中放置一个

map()

。我有，但错误仍然显示在浏览器控制台上。知道为什么会这样吗？

          <>
            <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

您需要在每个地图函数内的第一个标签上指定unique键。 我看到你有两张地图。一个映射到

this.state.rants

，另一个映射到

rant.categories

.

所以里面

rant.categories

你还需要为

<small className="post-archive-meta-details-name" key={SOMETHING UNIQUE}>

添加关键道具