时间戳

首页 > 解决方案 > React 无法通过 prop 数组映射

javascript - React 无法通过 prop 数组映射

问题描述

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

<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

标签： javascriptreactjs

解决方案

它试图在您从 api 获得结果之前读取数据。所以把map函数写成

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

在 react 中，最初安装组件时，render()会调用函数，然后componenentDidMount()调用函数来获取数据。所以最初details是空的。所以你需要写条件。

推荐阅读