Предупреждение: каждый дочерний элемент в списке должен иметь уникальное ключевое свойство, но у меня есть ключевые реквизиты

предоставленные ответы не дали мне подсказки о том, в чем проблема в моем случае здесь. Итак, я получаю следующую ошибку в консоли:

react-jsx-dev-runtime.development.js?bfcc:117 Warning: Each child in a list should have a unique "key" prop.

Check the render method of `Feed`. See https://reactjs.org/link/warning-keys for more information.

Это мой код в операторе возврата:

return (
    <>
      <Header></Header>
      <div className={hfstyles.feed} style={{ 'maxWidth': '980px;', 'textAlign': 'center', 'margin': '0 auto', 'padding': '5em 0' }}>

        {feed.map((post, index) => {
          const postBefore = index == 0 ? new Date() : feed[index - 1].createdAt;
          return randomIndex == index ? (
            <>
            <PostBasic
              post={post}
              postBefore={postBefore}
              key={post.id}
            />
            <RandomMessage/>
            </>)
            :
            (<PostBasic
              post={post}
              postBefore={postBefore}
              key={post.id}
            />
          );
        })}

        {feedEnd == true && (
          <p>Thats it</p>
        )}

      </div>
      <Footer sticky={false}></Footer>
    </>
  );

Я также попытался предоставить свойство key для <RandomMessage/> component, и я попытался изменить ключ с идентификатора базы данных post.id на index карты без каких-либо изменений.

См. также:  Как вернуться на предыдущую страницу в следующем js, используя следующий / маршрутизатор?
Понравилась статья? Поделиться с друзьями:
IT Шеф
Комментарии: 1
  1. Marcel Dz

    вы должны передать ключевые свойства фрагменту (‹›), а не PostBasic.

    Используйте вот так,

    Измените это

    (
      <>
        <PostBasic post={post} postBefore={postBefore} key={post.id} />
        <RandomMessage />
      </>
    );
    

    TO

    (<React.Fragment key={post.id}>
      <PostBasic post={post} postBefore={postBefore} />
      <RandomMessage />
    </React.Fragment>
    )
    

    Большое спасибо за вашу помощь! person Marcel Dz; 17.06.2021

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: