将本地文件中的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

您正在打开一个异步连接，但是您已经编写了代码，就好像它是同步的一样。该reqListener回调函数将不会与你的代码同步执行（即前React.createClass），但你的整个段已运行后，才和响应已经从远程位置接收。

除非您使用零延迟量子纠缠连接，否则在您运行所有语句之后就 很好了 。例如，要记录接收到的数据，您将：

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

我没有data在React组件中看到使用，所以我只能从理论上提出建议：为什么不在回调中 更新 您的组件？