Reactjs 如何在react中迭代JSON文件？

我是个新来的反应者，我一辈子都搞不懂这一点

我有一个JSON文件（图标）：

首先，我只想返回每个图标的名称

我一直在努力学习各种教程，并且：

import React, { PureComponent } from "react";
import iconList from './services/iconList';

export default class App extends PureComponent {

  render() {
      const items = iconList.map(data=>{
        return(
          <div>
            <ul>
              <li>
                <span>{data.name}</span>
              </li>
            </ul>
          </div>
          )
      })

    return items;
  }
}

import React，{PureComponent}来自“React”；
从“/services/iconList”导入iconList；
导出默认类应用程序扩展PureComponent{
render（）{
const items=iconList.map（数据=>{
返回(


{data.name}


)
})
退货项目；
}
}

但是我得到了一个错误：

。map不是一个函数

我不确定我能做些什么不同。我看到的每个教程似乎都使用了map函数。有更好/不同的方法吗？
尝试使用

const items = iconList.icons.map(data=>{

您的数据是一个包含icons属性的对象。您还可以在导入时分解iconList：

import {icons as iconList } from './services/iconList';

你试过
iconList.icons.map（…
还有，你试过控制台日志
iconList
？它是一个对象还是一个字符串？@keikai-yep，就是这样。想回答这个问题吗？
iconList
是JSON文件的名称吗？试过
iconList.icons.map（icon=>…
import {icons as iconList } from './services/iconList';