React - AJAX経由で初期リストをロード

Question

私は反応を学び始めています。優れた例は、AJAXを経由して最初にデータをロードする程度公式ドキュメントにあります：

var UserGist = React.createClass({ 
    getInitialState: function() { 
     return { 
      username: '', 
      lastGistUrl: '' 
     }; 
    }, 

    componentDidMount: function() { 
     this.serverRequest = $.get(this.props.source, function (result) { 
      var lastGist = result[0]; 
      this.setState({ 
       username: lastGist.owner.login, 
       lastGistUrl: lastGist.html_url 
      }); 
     }.bind(this)); 
    }, 

    componentWillUnmount: function() { 
     this.serverRequest.abort(); 
    }, 

    render: function() { 
     return (
      <div> 
       {this.state.username}'s last gist is 
       <a href={this.state.lastGistUrl}>here</a>. 
      </div> 
     ); 
    } 
}); 

ReactDOM.render(
    <UserGist source="https://api.github.com/users/octocat/gists" />, 
    mountNode 
); 

上記のコードはGitHubのから特定のユーザの最新の要旨を取得します。

特定のユーザーの最近の10の要点のリストを出力するには、Reactの最善の方法は何ですか？

上記のコードサンプルをどのように変更しますか？

Answer 1

var UserGist = React.createClass({ 
    getInitialState: function() { 
     return { 
      gists: [] 
     }; 
    }, 

    componentDidMount: function() { 
     this.serverRequest = $.get(this.props.source, function (result) { 
      this.setState({ 
       gists: result 
      }); 
     }.bind(this)); 
    }, 

    componentWillUnmount: function() { 
     this.serverRequest.abort(); 
    }, 

    render: function() { 
     return <div> 
      {this.state.gists.map(function(gist){ 
       return <div key={gist.id}>{gist.owner.login}</div> 
      })} 
     <div>; 
    } 
}); 

ReactDOM.render(
    <UserGist source="https://api.github.com/users/octocat/gists" />, 
    mountNode 
);