アレイを状態に保存する？

Question

私はリアクションウェブサイトのCommentBoxの例に基づいてRSSリーダーを構築しています。

googleフィードAPIの結果を状態保存するときに、変数がconsole.logに読み込まれるjQuery ajax関数の外部に状態が正しく保存されていないため、結果の情報は正しくなりますが、空の配列を出力している関数の外部の状態を読み込みます。これは、コンポーネントが最初に呼び出されたときに開始されます。

var RSSApp = React.createClass({ 
getInitialState: function() { 
    return {feed:[]}; 
}, 
componentDidMount: function() { 
    this.loadRssFeed(); 
}, 
loadRssFeed: function() { 
    $.ajax({ 
     url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=-1&q=' + encodeURIComponent(this.props.url), 
     dataType: "jsonp", 
     jsonCallback: "reponseData", 
     success: function(feed) { 
      var feeds = feed.responseData.feed.entries; 
      console.log(feeds) 
      console.log(feed.responseData.feed) 
      this.setState({feeds:feed}); 
     }.bind(this) 
    }); 
    console.log(this.state) 
}, 
render: function() { 
    return (
     <div className="RSSBox"> 
      <h1>RSS Feed built using ReactJS</h1> 
      <RSSForm /> 
      <RSSList data={this.state.feed} /> 
     </div> 
    ) 
} 
}); 

私は状態を保存する際に間違っていますか？

Answer 1

コードの問題は、設定する前に状態にアクセスしようとしていることです。

$.ajax呼び出しは非同期で非ブロッキングです。つまり、実際にデータがサーバーから返される前にconsole.log(this.state)が実行されます。これを修正するには、コードを次のように変更します（おそらく役に立つコメントを追加しました）。

var RSSApp = React.createClass({ 
getInitialState: function() { 
    return {feed:[]}; 
}, 
componentDidMount: function() { 
    this.loadRssFeed(); 
}, 
loadRssFeed: function() { 
    $.ajax({ 
     url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=-1&q=' + encodeURIComponent(this.props.url), 
     dataType: "jsonp", 
     jsonCallback: "reponseData", 
     success: function(feed) { 
      // the success callback is executed asynchronously after some time (time required to get the data from server) 
      var feeds = feed.responseData.feed.entries; 
      console.log(feeds) 
      console.log(feed.responseData.feed) 
      this.setState({feeds:feed}); 

      console.log(this.state); // <-- this should work, continue with state manipulation here 
     }.bind(this) 
    }); 
    // console.log(this.state) -- this will be executed before the data is returned from the server as previous call $.ajax is non-blocking 
}, 
render: function() { 
    return (
     <div className="RSSBox"> 
      <h1>RSS Feed built using ReactJS</h1> 
      <RSSForm /> 
      <RSSList data={this.state.feed} /> 
     </div> 
    ) 
}