地图不是函数：{} 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。

标签： javascript html reactjs

【解决方案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

【讨论】：