[解決済み] ローカルファイルからReact JSにjsonデータを読み込む

質問

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

ベストな方法、できれば"React"の方法について、何かアドバイスがあれば、とてもありがたいです

どのように解決するのですか？

あなたは 非同期接続 を開いているのに、あたかも同期であるかのようにコードを書いています。そのため reqListener コールバック関数はあなたのコードと同期して実行されるわけではありません。 React.createClass の前）、スニペット全体が実行され、リモートロケーションからレスポンスを受信した後にのみ実行されます。

ゼロレイテンシーの量子もつれ接続でない限り、これは では を実行した後になります。例えば、受信したデータをログに残すには、次のようになります。

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

の使い方がわからない。 data を使用しているのを見たことがないので、理論的にしか提案できませんが、なぜ アップデート コールバックでコンポーネントを更新しませんか？