リアクションを使用してネストされたAPIを呼び出しますか？私が反応使用してそれらに呼び出しを行う方法を知っていただきたいと思い</p> <pre><code>{ "farmer": [ { "crops": "corn" } ], "activities":{ "hobbies": "swimming" }, "name: Todd" } </code></pre> <p>：

Question

は、私は、次のJSONファイルを持っていたと言います。私の最善の試みは以下の通りです。

componentDidMount: function(){ 
var selfish = this; 
$.get('~~someurl~~', function(data){ 
selfish.setState(data); 
}); 
}, 

render: function(){ 
return (<div> 
<p>{this.state.name}</p> 
<p>{this.state.activities.hobbies}</p> 
<p>{this.state.farmer[0].crops}</p> 
</div>) 
} 

最初に{this.state.name}が書かれたとおりに実行されるようになります。しかし、React構文を使用して最後の2つを表現する方法については不明です。{this.state.activities.hobbies}と{this.state.farmer[0].crops}

私は、それぞれの呼び出しで達成しようとしていることを表現してくれるよううまくそれらを書いています。

EDIT：後者の2つの結果に起因する特定のエラーは、それらが未定義であることを示します。

EDIT：空の初期状態を追加して2番目の作業を行いました。

getInitialState: function(){ 
return {activities: '', farmer: ''} 
} 

ただし、最後のものは残りますが、それでもエラーが返されます。

Answer 1

問題は、componentWillMountを使用する必要があるときにcomponentDidMountを使用していることです。これらのライフサイクルの方法についてはthe documentationをご覧ください。

これは、初期レンダリングが発生した後、ドキュメントが はすぐに、だけで（ないサーバー上の）クライアント上で、一度に呼び出されますcomponentDidMount

について言っていることです。

これは、getInitialState before（他のライフサイクルメソッド）を使用していない限り、状態を宣言していないことを意味します。

componentWillMount: function() { 
    this.setState({ 
     "farmer": [ 
      { 
      "crops": "corn" 
      } 
     ], 
     "activities":{ 
      "hobbies": "swimming" 
     }, 
     "name": "Todd" 
    }); 
}, 

と私は私のrenderメソッドで

EDIT this.state.farmer[0].cropsを使用することができました：

私は単にこれをしなかった

が明確にされることを。コンポーネントをレンダリングした後にデータを取得する必要がある場合、レンダリングで使用する状態のデフォルト値を指定する必要があります。これは、getInitialStateを使って実現できます。