reactjs - ReactJS 不断询问密钥：警告：列表中的每个孩子都应该有一个唯一的“密钥”道具。检查`PostCard`的渲染方法

Question

我不知道为什么即使添加了密钥，仍会继续要求密钥。

我有一个渲染一些帖子的组件，但每个帖子都在它自己的组件中渲染，并且它位于来自Swiper的组件内

我的组件如下所示：

export default function Posts() {

const postsCards = posts.map(post => {
   return <SwiperSlide className="w-25" key={post._id}>
              <PostCard post={post} key={post._id}/>
          </SwiperSlide>
})

return (
<div className="container">
    <h4>Top posts</h4>
    <Swiper
      slidesPerView= 'auto'
      spaceBetween= {10}
      observer= {true}
      observeParents={true}
    >
        {postsCards}
    </Swiper>
</div>
)
}

Answer 1

正如我所看到的，您对于 SwiperSlide 和 PostCard 也有相同的密钥。您应该为每个人都有一个唯一的密钥。

Answer 2

仅将 key 属性添加到父组件 SwiperSlide 就足够了。

Answer 3

正如@user9779830 所述

SwiperSlide 和 PostCard 具有相同的密钥。我创建了一个解决方案，其中 PostCard 组件的键设置为 post._id 的哈希：

hashCode = s => s.split('').reduce((a,b)=>{a=((a<<5)-a)+b.charCodeAt(0);return a&a},0)

export default function Posts() {

const postsCards = posts.map(post => {
   return <SwiperSlide className="w-25" key={post._id}>
              <PostCard post={post} key={hashCode(post._id.toString())}/>
          </SwiperSlide>
})

return (
<div className="container">
    <h4>Top posts</h4>
    <Swiper
      slidesPerView= 'auto'
      spaceBetween= {10}
      observer= {true}
      observeParents={true}
    >
        {postsCards}
    </Swiper>
</div>
)
}

如您所见，两个组件的键将不同，因为 PostCard 组件使用 'post._id' 的哈希

Answer 4

这不完全是一个解决方案，但现在使用索引作为键，可以让您识别您的 post._id 是否是唯一的。

const postsCards = posts.map((post, index) => {
   return <SwiperSlide className="w-25" key={`${post._id}-${index}`}>
              <PostCard post={post}/>
          </SwiperSlide>
})

如果上面的代码不再返回错误，那么很可能你posts在你的帖子数组中重复了。