将外部本地 json 加载到 React 中并渲染

Question

我有另一个反应新手问题，我正在尝试从名为 intro.json 的外部本地文件加载一些 json 数据，但我收到错误 default.map is not a function。关于我在这里做错了什么有什么想法吗？

我的数据是这样的

{
    "company": "test",
    "employees":[
    {
          "firstName":"John",
          "lastName":"Doe"
    },
    {
        "firstName":"Anna",
        "lastName":"Smith"
    }
    ]
}

我是这样导入的，我认为这可能会起作用，因为我在其他地方做类似的事情，但不是作为外部文件。

import React, {PropTypes} from 'react';
import data from './intro.json';

var dataList = data.map(function(dl, index) {
    return (
       <li key={index}>{dl.company}</li>
    )
});

....

Answer 1

使用json-loader，导入的data将是一个Object实例： Object {company: "test", employees: Array[2]} 遍历和映射：

  Object.entries(data).map(([key,value])=> {
  if (Array.isArray(value)) {
    //return array value representation
    ...
  } else {
    //return normal value representation
    return (
        <div>{key} : {value}</div>
    );
  }
})