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 и для открытки тоже. У вас должен быть уникальный ключ для каждого из них.

Answer 2

Как упомянул 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 3

Это не совсем решение, но использование индекса в качестве ключа на данный момент позволяет определить, является ли ваш post._id уникальным.

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

Если он больше не возвращает ошибку с приведенными выше кодами, вероятно, вы дублировали posts в вашем массиве сообщений.

Answer 4

Достаточно добавить ключевой атрибут только к родительскому компоненту SwiperSlide.