Question

我在componentDIdMount()上获取一个api，然后将json存储到一个状态，然后将该状态作为prop传递，除了在数组上显示数据外，我没有问题。

<Component details={this.state.details} />

json：

    {
    "adult": false,
    "backdrop_path": "/qonBhlm0UjuKX2sH7e73pnG0454.jpg",
    "belongs_to_collection": null,
    "budget": 90000000,
    "genres": [
    {
    "id": 28,
    "name": "Action"
    },
    {
    "id": 878,
    "name": "Science Fiction"
    },
    {
    "id": 35,
    "name": "Comedy"
    },
    {
    "id": 10751,
    "name": "Family"
    }
    ]
    }

然后我尝试映射类型：

<div className={style.genre}>
   {details.genres.map(g => (
      <span key={g.id}>{g.name}</span>
   ))}
</div>

但是后来我得到Cannot read property 'map' of undefined，我不知道为什么会这样，因为我能够做details.budget

Answer 1

它正在尝试从api获得结果之前读取数据。所以将map函数写为

    {details&&details.genres&&details.genres.map(g => (
      <span key={g.id}>{g.name}</span>
   ))}

在反应中最初在安装组件时，将调用render()函数，然后调用componenentDidMount()来获取数据。因此，最初details为空。所以你需要写条件。

React无法通过prop数组进行映射

1 个答案: