gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 21:40:46 24 4
gpt4 key购买 nike

我在 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>

但后来我得到无法读取未定义的属性“map”,我不知道为什么会发生这种情况,因为我能够执行details.budget

最佳答案

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

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

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

关于javascript - React 无法通过 prop 数组进行映射,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60370212/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com