web-dev-qa-db-ja.com

jsonデータをローカルファイルからReact JSにロードする

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」方法に関するアドバイスをいただければ幸いです。

javascriptajaxjsonxmlhttprequestreactjs
52
Desmond

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

遅延ゼロの量子エンタングルメント接続を使用している場合を除き、すべてのステートメントが実行された後、これはwellです。たとえば、受信したデータを記録するには、次のようにします。

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

Reactコンポーネントでdataが使用されていないので、理論的にのみこれを提案できます。なぜupdateコールバックのコンポーネント？

13
John Weisz

私は同じことをしようとしていましたが、これが私のために働いたものです（ES6/ES2015）：

import myData from './data.json';

私は同じことを尋ねる反応ネイティブスレッドでこの答えから解決策を得ました： https://stackoverflow.com/a/37781882/176002

101
rockfakie

ファイルをコンポーネントで使用できるようにする最も簡単で効果的な方法は次のとおりです。

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

パスの前のjson!に注意してください

21
César

  1. インストールjson-loader：

    npm i json-loader --save

  2. dataにsrcフォルダーを作成します。

    mkdir data

  3. ファイルをそこに置きます

  4. ファイルをロードする

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

9
ChaosPredictor

Webpack configを使用して、JSONファイルを外部として追加できます。その後、任意の反応モジュールにそのjsonをロードできます。

この答え を見てください

0
Rishab Doshi