2017-01-12 4 views
0

私は以下のReactクラスを持っています。最初、コンソールは空の配列{}を出力し、空のdivを返します。しかし、半秒後にコンソールは正しい値を表示しますが、空のdivが残っています。 JSONを適切にロードするためにクラスをどのように変更する必要がありますか?React:JSONデータのレンダリング遅延?

var TableData = React.createClass({ 

    render: function() { 
     console.info(JSON.stringify(this.props.summary)); 

     if (!this.props.data || !this.props.summary) { 
      return <div>Loading name table..</div> 
     } 

     var summary = this.props.table; 

     var nameTable = summary.nameTable; 
     var nameTableArr = Object.values(nameTable); 
     return (// A table is returned here, works with the same data structure as is present in the JSON 

私がコンソールに行けば、console.infoは正しく「ロード名テーブル...」div要素を返す、最初は空JSON文字列{}を出力します。しかし、データは半秒後にコンソールに表示されますが、if文から抜け出してテーブルを作成することはありません。

varがnameTable varに「手動」データを含めるように変更すると機能します。そのため、半分の遅延が発生したサーバー側データをレンダリングする必要があります。

私は上記のクラスを例えば1秒間レンダリングを遅延させてからテーブルを作成するように変更できますか?それは私が疑う場合に動作します。

if文を削除すると、コンソールにUncaught TypeError: Cannot convert undefined or null to objectという結果が得られます。文字列は実際には0.5秒間は空のため、意味があります。

答えて

1

私はリアクションが経験されましたが、これは非同期動作に問題があるようです。

もっとうまくいくためには、ajaxが呼び出される部分のコードが必要です。

私の意見では、問題はまだ結果が出ないときに最初にトリガーされ、データがロードされた後に再びトリガーされないということです。

だから、AJAX非同期の処理を詳しく見てください。問題が発生しています。