React не может прочитать карту свойства undefined в компоненте

Question

У меня есть данные из стороннего API, например:

{
  "title": "some title",
  "genres": [
    {
      "id": 1,
      "name": :Family",
    },{
      // another object goes below for movie genre
    }
  ]
}

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

Родитель:

<Datacard movieSingle={this.state.movieSingle} />

Дети:

let movieData = this.props.movieSingle;
const genreItems = movieData.genres.map((genre) => 
  <span>{genre.name}</span>
);

У меня ошибка типа TypeError: Cannot read property 'map' of undefined

Я пытаюсь console.log(this.props.movieSingle) на ребенка, и я получил следующее:

>[]
>[]
>{adult: false, backdrop_path: "/1EGFjibWzsN2GNNeOSQBYhQ9pK5.jpg", belongs_to_collection: null, budget: 0, genres: Array(3), …}
>{adult: false, backdrop_path: "/1EGFjibWzsN2GNNeOSQBYhQ9pK5.jpg", belongs_to_collection: null, budget: 0, genres: Array(3), …}

Из того, что я читал, map() доступно в массиве, а жанры - в массиве, или я что-то пропустил? Спасибо :)

Answer 1

Ошибка возникает, потому что код также запускается, когда данные еще не получены из API. Поэтому, пожалуйста, добавьте условие в функцию рендеринга, как это.

let movieData = this.props.movieSingle;
const genreItems = movieData.genres ? movieData.genres.map((genre) => 
  <span>{genre.name}</span>
) : [];

Answer 2

Обратите внимание на первые два экземпляра вашего console.log(this.props.movieSingles) его права >[], для тех первых двух дочерних элементов, у которых this.props.movieSingles равно [], this.props.movieSingles.genres равно undefined, поэтому нельзя использовать map() для первых двух экземпляров.

Answer 3

Когда вы получаете данные, они обновляются асинхронно, поэтому вы должны .map, когда они доступны:

// Optional chaining syntax
const genreItems = movieData?.genres.map((genre) => <span>{genre.name}</span>) ?? [];

// Or
const genreItems = movieData.genres
  ? movieData.genres.map((genre) => <span>{genre.name}</span>)
  : [];