反應 - 通過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的特定用戶的最新依據。

React輸出特定用戶的最後10個要點列表的最佳方法是什麼？

你會如何修改上面的代碼示例？

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 
);