Warning: Each child in a list should have a unique "key" prop

Question

Функциональный компонент реакт возвращает следующий элемент:

return (
    <section className="moviescardlist">
      <ul className="moviescardlist__list">
        {!isSavedMovies &&
          filteredMovies
            .filter((movie, id) => id < countmovies)
            .map((movie) => (
              <MoviesCard
                key={movie._id}
                movie={movie}
                isSavedMovies={isSavedMovies}
                isMovieLike={isMovieLike}
                likeMovieHandle={likeMovieHandle}
                handleAddMovie={handleAddMovie}
                getIsSaved={getIsSaved}
                handleCardDeleteFromMovie={handleCardDeleteFromMovie}
                savedMovies={savedMovies}
              />
            ))}
        {isSavedMovies &&
          filteredSavedMovies.map((movie) => (
            <MoviesCard
              key={movie._id}
              movie={movie}
              isSavedMovies={isSavedMovies}
              isMovieLike={isMovieLike}
              likeMovieHandle={likeMovieHandle}
              handleAddMovie={handleAddMovie}
              handleCardDelete={handleCardDelete}
              getIsSaved={getIsSaved}
            />
          ))}
      </ul>
      {!isSavedMovies &&
        filteredMovies.length > countmovies - 3 &&
        filteredMovies.length > countmovies && (
          <button
            type="button"
            className="moviescardlist__else"
            aria-label="Еще"
            onClick={addMovies}
          >
            Еще
          </button>
        )}
    </section>
  );

Появляется предупреждение: Warning: Each child in a list should have a unique "key" prop. Хотя ключ указан у первого тега после map - насколько я понимаю, этого достаточно, то есть не обязательно, чтобы key был указан у первого тега после return (утверждается в некоторых обсуждениях), также и в документации: https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key сначала идет ul без key, а потом map, возвращающий первый тег с key.

Как правильно указать, чтобы не было этого предупреждения. В рендеринге баг, возможно из-за этого.

Answer 1

Попробуй следующее:

Возможно React думает, что поле movie._id может совпасть из массива filteredMovies и массива filteredMovies. В таких случаях я добавляю в key еще какое-нибудь поле. В твоем примере я бы добавил поле movie.title если оно у тебя есть или что-то в этом роде. В итоге получилось бы следующее:

// твой код
filteredMovies
            .filter((movie, id) => id < countmovies)
            .map((movie) => (
              <MoviesCard
                key={movie._id + movie.title}
                movie={movie}
                .../>
// твой код
filteredSavedMovies.map((movie) => (
            <MoviesCard
              key={movie._id + movie.title}
              movie={movie}
              .../>
// твой код

БЛОГ НА HUSL

Warning: Each child in a list should have a unique "key" prop

Ответы (1 шт):

Попробуй следующее: