React - 非同期処理の直後の状態を設定する

Question

ボタンがあります。しかし

onSubmit(e) { 
     e.preventDefault(); 
     this.props.nextSentence(); //this is async 

     this.setState({ //this is not yet updating with the right values then 
      inputField: this.props.activePupil.name 
     }); 
    } 

：あなたがそのボタンをクリックすると、それはこのようになりますonSubmit検証機能が表示されますthis.props.nextSentence();は非同期であるので、私はすぐ後に私の状態を設定する場合、変更はありません。今すぐ状態を再設定する2番目の関数を参照する2番目のボタンがあります。私はこれが自動的に起こるようにしたいと思います。どうすればこのことができますか？

Answer 1

非同期アクションは通常、Promisesまたはfunctions with callbacksです。あなたは

this.props.nextSentence().then(() => { 
    this.setState({...}); 
}) 

そしてfunction with callback

this.props.nextSentence(() => { 
    this.setState({...}) 
}) 

の場合は、以下のように.thenを使用する必要がPromiseの場合

しかし、あなたの非同期の返された応答を得ることができるよりも心に留めておきますあなたの状態を更新するためにそれを使用します。これは通常の場合です。あなたは結果をしたいと、その後の状態を設定していない理由は例えば

//here response is a json object returned from server  
this.props.nextSentence().then((response) => { 
    this.setState({ 
    data: response.data 
    }); 
})