地图不是函数: JSON 数组
Posted
技术标签:
【中文标题】地图不是函数: JSON 数组【英文标题】:Map is not a function : JSON array地图不是函数: JSON 数组 【发布时间】:2019-12-28 17:04:02 【问题描述】:我刚从 Vue 转到 React,我对数组的迭代有点迷茫。 使用相同的 API,一切都适用于 Vue,但不适用于 React。
以下是我的 API 的答案示例:
"blade":
"id":"1",
"key":"blade"
,
"sword":
"id":"2",
"key":"sword"
我认为问题在于我的 API 响应返回一个数组,但带有符号 而不是
[]
如果问题来自于此,我该如何解决?
这是我当前的代码:
class ItemSelection extends React.Component
constructor(props)
super(props);
this.state =
items: [],
;
componentDidMount()
fetch('https://myapi.com/items.json')
.then(response => response.json())
.then(data => this.setState( items: data ));
render()
return (
<div>
this.state.items.map(item => (
<div>...</div>
))
</div>
);
【问题讨论】:
items: ,
不是数组
表示对象,[]
表示数组,如果你混淆了它们,你将一事无成
json 是一个对象,该对象可以包含数组
map
是数组原型fn
,你不能用
/ object
得到它。要迭代对象,请使用 for..in
循环
@SatyamPathak:或Object.keys(object).map
。
【参考方案1】:
响应是一个对象......您可以使用函数 Object.values(items) 来获取值列表并使用 map 函数。
.then(data => this.setState( items: Object.values(data) ));
【讨论】:
【参考方案2】:我用 data = Array.from(data); 解决了一个类似的问题
【讨论】:
【参考方案3】: 表示 JSON 对象,不是数组,map 对象也以类似的方式处理。因此,您可以使用如下方式访问对象/地图的元素
<div v-for="item in items">
<p><strong>Id:</strong> item.id</p>
<p><strong>Key:</strong> item.key</p>
</div>
更多信息可以参考https://vuejs.org/v2/guide/list.html
【讨论】:
以上是关于地图不是函数: JSON 数组的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 JSON 纬度数组和 JSON 经度数组在 Google 地图上显示折线?
在android中使用json数组值的android地图标记