React JS、jsonデータをロードしてから操作する

Question

反応を出して再生し始めました。ちょっとした文法を覚えています。データが表示されたAJAXリクエストに固執しました。

コンソールでは、test.jsonのローカルバージョンが見つからないというエラーが表示されます。それはheader.jsと同じディレクトリにあるかもしれませんが、あなたのコードは、クライアント側を実行しているし、クライアント（ブラウザ）test.jsonが何であるかのないアイデアを持っていないheader.jsファイルと同じディレクトリに

//header.js 
import React from 'react'; 
import $ from 'jquery'; 

var theData = []; 

var Header = React.createClass({ 
    getInitialState: function() { 
     return { 
     data: null 
     }; 
    }, 
    componentDidMount: function() { 
     $.ajax({ 
      dataType: 'json', 
      url: "./test.json", 
      success: function(data) { 
      theData.push(data); 
      console.log(theData); 
      } 
     }); 
    }, 
    render: function() { 
     return (
     <div> 
      <div id="theData" className="theData"></div> 
       {theData.someValue} 
      </div> 
     </div> 
     ); 
    } 
}); 

Answer 1

test.jsonです。

代わりに、サーバー側のロジックにエンドポイントを定義して、test.jsonの内容を読み取り、JSONオブジェクトとしてクライアントに戻す必要があります。クライアントサイドのロジックでは、現在のXHRのURLプロパティをエンドポイントのURIに置き換える必要があります。

サイドノート：XHRが完了しても、そのままのコンポーネントにはデータが表示されません。 theDataは正しく変異されますが、コンポーネントの再レンダリングは実行されません。代わりにXHRレスポンスJSONをコンポーネントの状態（正しく初期化したgetInitialState）に関連付けて、その値が変更されたときにReactがそれに応じて再レンダリングする必要があります。

のコード例で、Expressと仮定してください。サーバー上で

：（上記サイドノートで述べたように修正して）クライアントで

const fs = require('fs'); 
const app = ... 

app.get('/name-this-endpoint-appropriately', (req, res) => { 
    const json = fs.readFileSync('test.json', 'utf8'); 
    res.send(json); 
}); 

：

import React from 'react'; 
import $ from 'jquery'; 

var Header = React.createClass({ 
    getInitialState: function() { 
     return { 
      data: [] 
     }; 
    }, 
    componentDidMount: function() { 
     $.ajax({ 
      dataType: 'json', 
      url: "/name-this-endpoint-appropriately", 
      success: (data) => this.setState({data}) 
     }); 
    }, 
    render: function() { 
     return (
     <div> 
      <div id="theData" className="theData"></div> 
       {this.state.data.someValue} 
      </div> 
     </div> 
     ); 
    } 
});