React 无法读取组件上未定义的属性“映射”

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 获取数据时代码也在运行。 所以请像这样在渲染 function 中添加条件。

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

Answer 2

当您获取数据时，它会异步更新，因此您应该在可用时使用.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>)
  : [];

Answer 3

请注意您的console.log(this.props.movieSingles)的前两个实例其>[]正确，对于那些this.props.movieSingles等于[]的前两个孩子， this.props.movi this.props.movieSingles.genres等于undefined ，因此不能对前两个实例使用map() 。