地图不是函数: 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 地图上显示折线?

从 Java 中的谷歌地图 api 解析 Json 数组

在android中使用json数组值的android地图标记

移动地图时,在谷歌地图中更新Ajax Json数组中的标记

过滤由 id 键入的 json 并返回一个数组;没有未定义的地图

使用 JSON 数据输出数组数组而不是一个数组来反应 useState Hooks