将外部本地 json 加载到 React 中并渲染
Posted
技术标签:
【中文标题】将外部本地 json 加载到 React 中并渲染【英文标题】:Loading external local json into React and rendering 【发布时间】:2016-11-23 10:18:17 【问题描述】:我有另一个反应新手问题,我正在尝试从名为 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>
)
);
....
【问题讨论】:
【参考方案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-loader,我已经在我的 webpack 配置中设置了它,它不能解决我遇到的问题。 因为data
代表一个对象而不是一个数组。例如,要遍历可以使用Object.entries 的对象,我将使用代码更新答案。
哦,对了!我明白了,ES2015 不支持 object.entries 对吧?
不,仅在 ES7 中。你可以让它与transform-runtime babel plugin一起工作以上是关于将外部本地 json 加载到 React 中并渲染的主要内容,如果未能解决你的问题,请参考以下文章
React Native:“未定义不是对象”使用 ListView 和外部数据源渲染组件
将 JSON 文件加载到 React 组件状态 | Wepback2