GETリクエストのデータを反応で使用し、子コンポーネントで使用する

Question

チームのデータを返す反応アプリでGETリクエストを作成しています。私はこれを親コンポーネントで作成してから、子コンポーネントLoopに渡します。 GETリクエストは機能していますが、GETリクエストが完了していないと思われるため、render機能に到達すると未定義です。私はcomponentWillMountを使用しようとしましたが、同じ問題が発生していました。

私は間違っている何かを見ることができる人がいますか？私はReactにはかなり新しいです。

以下のコードをご覧ください。

var App = React.createClass({ 

    getInitialState: function() { 
     return { 
      teams: [] 
     } 
    }, 

    componentDidMount: function() { 
     $.get(url, function(data) { 
      this.state.teams.push(data) 
     }); 
    }, 

    render: function() { 
     console.log(this.state.teams) 
      return ( 
      <div> 
       < Loop teams={this.state.teams}/> 
      < /div> 
     ) 
    } 
}); 

var Loop = React.createClass({ 
    render: function() { 
     var teamList = this.props.teams.map(function(team, index){ 
      return(
       <h1 key={index}> 
        {team.name} 
       </h1 > 
      ) 
     }) return <ul > {teamList} < /ul> 
    } 
}) 

Answer 1

あなたは正しい軌道に乗っている：要求はまだ完了していないので、あなたがundefinedを取得する理由はあります。

あなたのコードでは、状態を直接変更するthis.stateが使用されているからです。

componentDidMount: function() { 
    $.get(url, function(data) { 
     this.setState({ 
     teams: data, 
     }) 
    }.bind(this)); 
} 

がthe docsを参照してください：あなたは、更新要求が行われているだけの状態setStateを、使用する必要があるので、しかし、あなたの要求は非同期です。