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>
    );
  }
})

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

1 个答案: