将本地文件中的json数据加载到React JS中

Question

我有一个React组件,我想从文件中加载我的JSON数据.控制台日志当前不起作用,即使我将变量数据创建为全局变量

'use strict';

var React = require('react/addons');

// load in JSON data from file
var data;

var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.open("get", "data.json", true);
oReq.send();

function reqListener(e) {
    data = JSON.parse(this.responseText);
}
console.log(data);

var List = React.createClass({
  getInitialState: function() {
    return {data: this.props.data};    
  },
  render: function() {
    var listItems = this.state.data.map(function(item) {
        var eachItem = item.works.work;        

        var photo = eachItem.map(function(url) {
            return (
                <td>{url.urls}</td> 
            )
        });
    });
    return <ul>{listItems}</ul>
  }
});

var redBubble = React.createClass({
    render: function() {
      return (
        <div>
          <List data={data}/>          
        </div>
      );
    }
  });

module.exports = redBubble;

理想情况下,我更喜欢这样做,但它不起作用 - 它试图在文件名的末尾添加".js".

var data = require('./data.json');

任何关于最佳方式的建议,最好是"反应"的方式,将非常感谢!

Answer 1

我试图做同样的事情,这对我有用(ES6/ES2015):

import myData from './data.json';

我从一个反应本机线程得到了这个答案的解决方案,问同样的事情:https: //stackoverflow.com/a/37781882/176002

Answer 2

使文件可用于组件的最简单且最有效的方法是:

var data = require('json!./data.json');

注意json!路径之前

Answer 3

您正在打开异步连接,但您已将代码编写为同步.该reqListener回调函数将不会与你的代码同步执行(即前React.createClass),但你的整个段已运行后,才和响应已经从远程位置接收.

除非您处于零延迟量子纠缠连接,否则在您的所有语句运行之后这是很好的.例如,要记录接收的数据,您将:

function reqListener(e) {
    data = JSON.parse(this.responseText);
    console.log(data);
}

我没有看到data在React组件中的使用,所以我只能在理论上提出这个建议:为什么不在回调中更新你的组件？

Answer 4

如果您有几个 json 文件：

import data from 'sample.json';

如果您要动态加载众多 json 文件之一，则可能必须使用 afetch来代替：

fetch(`${fileName}.json`)
  .then(response => response.json())
  .then(data => console.log(data))

Answer 5

1. 安装json-loader:

   npm i json-loader --save

2. 创建data文件夹src:

   mkdir data

3. 把你的文件放在那里

4. 加载你的文件

   var data = require('json!../data/yourfile.json');

Answer 6

我的 JSON 文件名：terrifcalculatordata.json

[
    {
      "id": 1,
      "name": "Vigo",
      "picture": "./static/images/vigo.png",
      "charges": "PKR 100 per excess km"
    },
    {
      "id": 2,
      "name": "Mercedes",
      "picture": "./static/images/Marcedes.jpg",
      "charges": "PKR 200 per excess km"
    },
    {
        "id": 3,
        "name": "Lexus",
        "picture": "./static/images/Lexus.jpg",
        "charges": "PKR 150 per excess km"
      }
]

首先，在顶部导入：

import calculatorData from "../static/data/terrifcalculatordata.json";

然后返回后：

  <div>
  {
    calculatorData.map((calculatedata, index) => {
        return (
            <div key={index}>
                <img
                    src={calculatedata.picture}
                    class="d-block"
                    height="170"
                />
                <p>
                    {calculatedata.charges}
                </p>
            </div>