将外部本地 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 中并渲染的主要内容,如果未能解决你的问题,请参考以下文章

浏览器加载解析渲染的过程

将外部 json 数据加载到 html 表单中

React Native:“未定义不是对象”使用 ListView 和外部数据源渲染组件

将 JSON 文件加载到 React 组件状态 | Wepback2

使用 Jquery Json P 将外部数据加载到 phonegap

React - 加载 JSON 并渲染组件