Reactjs：更新された状態データ（ストアから）をすぐに使用する

Question

私はfluxと反応しています。

onClickEventEdit: function(itemId) { 

     ScheduleActions.getEventById(itemId) // this ultimately is set into `currentEventById` state 

     var title = this.state.currentEventById['title'] || "" 

     console.log(title) // logs nothing 
     console.log(this.state.currentEventById) //logs empty object {} 

     // then show modal 
     $('#eventSelectedModal').modal({ 
      show: true 
     }); 

    }, 

マイScheduleActionは、イベント情報を取得するためのAJAX呼び出しです：

は、私は、クリック時にアクションを実行呼び出して、私のコンポーネントで機能を持っています。 Ajaxアクションが実行されると、私のストアが更新されます。私はタイトル割り当てとログが行われた後に私の店を更新するという印象を受けています。

アクションが呼び出された後、この情報にアクセスしてクライアントに情報をすぐに表示する方法を教えてください。

Answer 1

AJAXコール（技術的にはXMLHttpRequests）は非同期に実行されます。つまり、HTTP呼び出しがまだ応答を待っている間は、同期コードが実行され続けます。これは、あなたが期待している振る舞いとまったく同じです。

最も簡単な解決策は、非同期呼び出しが完了したときに呼び出されるコールバックパラメータでgetEventById()メソッドを拡張することです。コールの後に実行する必要があるコードをコールバックに移動できるようになりました。でも綺麗な解法については

onClickEventEdit: function(itemId) { 

    ScheduleActions.getEventById(itemId, function() { 

     var title = this.state.currentEventById['title'] || "" 

     console.log(title) // logs nothing 
     console.log(this.state.currentEventById) //logs empty object {} 

     // then show modal 
     $('#eventSelectedModal').modal({ 
      show: true 
     }); 
    }); 
}, 

、あなたはPromisesに見ることができます。