Блог

Главная - Вопросы по программированию - У каждого ребенка в списке должна быть уникальная «ключевая» опора — но у меня она есть?

У каждого ребенка в списке должна быть уникальная «ключевая» опора — но у меня она есть?

#javascript #reactjs

Вопрос:

Я получаю ошибку «у каждого ребенка в списке должна быть уникальная опора для ключа», но я в замешательстве, потому что пытаюсь установить ключ на уникальный идентификатор, и кажется, что это не работает. Я использую imdbID в качестве ключа, который должен быть значением первичного ключа (уникальным и стабильным). Мой синтаксис неверен, или что я здесь делаю неправильно ?

 import React from 'react';
import "./movie.css";

class Movie extends React.Component {
   render() {
       const {Title, Poster, Year, imdbID} = this.props;

       return (
           <div className="movie" key={imdbID} id={imdbID}>
               <div className="title-year">
                   <h1 className="title">{Title}</h1>
                   <h2 className="year">{Year}</h2>
               </div>
               <div className="poster">
                   <img src={Poster} alt="my movie poster"/>
               </div>
           </div>
       )
   }
}

export default Movie;

А вот код, который вставляет <Фильм…> в приложение (app.js):

  render() {
   return (
     <div className="App">
       <header className="App-header">
         <Search handleSendRequest={this.sendRequest}/>
         <div className="response">
          {
          this.state.movies amp;amp; this.state.movies.length ? this.state.movies.map((movie) => {
            return <Movie {...movie}/>
          })
          : null
          }
          
        </div>
       </header>
     </div>
   );
 }

Комментарии:

1. Примените ключ к компоненту <Фильм />, в котором вы сопоставляете это.состояние.фильмы

Ответ №1:

Добавьте key атрибут в теги фильмов и задайте уникальное значение. Как показано ниже

 {
  this.state.movies amp;amp; this.state.movies.length ? this.state.movies.map((movie, index) => {
      return <Movie key={movie.imdbID} { ...movie
      }
      />
    }) :
    null
}

Комментарии:

1. Я не знаю свойств фильмов, поэтому я использовал index . Спасибо за ваш комментарий. @Адам

2. Модифицированный. @Адам

3. Я сделал это обновление, но я все еще получаю предупреждение. { это.состояние.фильмы amp;amp; это.состояние.фильмы. длина ? this.state.movies.map((фильм, индекс) => { возврат ><Ключ фильма={movie.imddID} {…фильм}/> }) : null }

4. Неважно-публикация кода здесь заставила меня увидеть, что у меня была опечатка в imddID, которая должна быть imdbID. Спасибо!

Ответ №2:

Вам нужен ключ сам по <Movie/> себе:

       {
      this.state.movies amp;amp; this.state.movies.length ? this.state.movies.map((movie) => {
        return <Movie key="HERE" {...movie}/>
      })
      : null
      }

В частности, вам нужен ключ каждый раз, когда вы выполняете итерацию над объектом. В этом случае вы повторяете все сначала this.state.movies .

Вам не нужен ключ внутри функции рендеринга фильма, куда вы его поместили, потому что в это время вы не повторяете какой-либо объект.

Ответ №3:

Опора «ключ» должна быть вставлена в <Movie/> компонент, а не в div внутри него.

Метки: