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

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

任何关于最佳方式的建议，最好是“React”方式，将不胜感激!

最佳答案

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

import myData from './data.json';

我在一个 react ​​原生线程上从这个答案中得到了解决方案，询问同样的事情:https://stackoverflow.com/a/37781882/176002

https://stackoverflow.com/questions/31758081/