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

问题描述

我不知道为什么即使添加了密钥，react 仍然要求提供密钥。

我有一个组件可以呈现一些帖子，但每个帖子都在它自己的组件中呈现，并且它位于来自 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>
)
}

解决方法

正如我所见，您对 SwiperSlide 和 PostCard 也有相同的键。您应该为每个人设置一个唯一的密钥。

,

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

,

正如@user9779830

所提到的

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

struct xfrm_usersa_info

如您所见，由于 PostCard 组件使用“post._id”的哈希值，因此这两个组件的键将不同

,

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

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

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