如何解决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 就足够了。
, 所提到的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
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。