Im使用react.js。 Im在此位置获取错误“无法读取未定义的属性'map'”:1
17 | };
18 |
19 | return (
> 20 | <div>
21 | {items.map(item => (
22 | <h1 key={item.itemid}>{item.name}</h1>
23 | ))}
我的代码是:code
有人知道解决办法吗？
在呈现此组件时，没有在某个时候定义items。 防止这种情况发生的一种方法是使用短路评估:
{items && items.map(item => (
<h1 key={item.itemid}>{item.name}</h1>
))}
看看您的代码，items在您的数据提取完成之前是未定义的，所以这个保护应该可以工作。 许多人使用的另一个选择是在提取发生时有某种“加载”显示。 这可以使用三值运算符来实现，如下所示:
{!items ? "Loading..." : items.map(item => (
<h1 key={item.itemid}>{item.name}</h1>
))}
只是按如下方式修改:-
{items && items.map(item => (
<h1 key={item.itemid}>{item.name}</h1>
))}
问题的根本原因是由于对不是数组的对象调用了。map。
在react中，items.map（item=>(....))构造仅当items是数组时才起作用。
上面的API调用（“fortnite-public-api.theapinetwork.com/prod09/upcoming/get”）返回一个JSON对象。 它不包含数组。 这就是。map失败的原因。
API提供的数据:
{
"success":false,
"location":"fortnite-api-duplicate",
"error":{"code":"xx002","message":"Access denied."},
"data":{}
}
可以通过用实际数据值替换。map来使代码正常工作。
工作示例:
return (
<div>
<h2>Location = {items.location}</h2>
<div> Data = {JSON.stringify(items.data)}</div>
</div>
)
