Reactjs：チェックボックスの状態が更新され、コールバック関数が終了したときに復帰します。

Question

私はかなり新しい反応を示し、今日は奇妙な問題に遭遇しました。私は、この特定の機能はADDTO/removeFromTransactionSubmissionと呼ばれる親受け継が関数を呼び出すhandleCheckBoxClick呼び出される関数（）

handleCheckboxClick : function (e) { 
    this.setState({isChecked : e.target.checked}, 
     function() { 
      if (this.state.isChecked) { 
       this.props.addToTransactionSubmissions(
        this.props.submissionGuid, 
        this.props.paymentInfo 
       ); 
      } else { 
       this.props.removeFromTransactionSubmissions(
        this.props.submissionGuid 
       ); 
      } 
     } 
    ); 
} 

を持っています。次のように両方のためのコードは次のとおりです。

は

addToTransactionSubmissions : function (guid, paymentInfo) { 
    if (Object.keys(this.state.transactionSubmissions).length === 0) { 
     this.setState({submissionType : paymentInfo.status_description.toLowerCase()}, 
      function() { 
       console.log('it set the state though'); 
       console.log(this.state.transactionSubmissions); 
       this.toggleButtons(this.state.submissionType); 
      } 
     ); 
    } 
    var newTansactionSubmissions = update(this.state.transactionSubmissions, 
     { 
      $merge : {[guid] : paymentInfo} 
     }); 
    this.setState({transactionSubmissions : newTansactionSubmissions}, 
     function() { 
      console.log('state is now', this.state.transactionSubmissions); 
     } 
    ); 
}, 
removeFromTransactionSubmissions : function (guid) { 
    if (Object.keys(this.state.transactionSubmissions).length === 0) { 
     this.setState({submissionType : undefined}, 
      function() { 
       this.toggleButtons(this.state.submissionType); 
      } 
     ); 
    } 
    var newTransactionSubmission = update(this.state.transactionSubmissions, 
     { 
      [guid] : {$apply: function (x) {return undefined}} 
     }); 
    this.setState({transactionSubmissions : newTransactionSubmission}, 
     function() { 
      console.log('here in remove Transaction'); 
     }); 
} 

私はに実行し、問題がADDTO/removeFromTransactionSubmissionsが呼び出されたときに、チェックボックスは述べて変化しないということである、ADDTO/removeFromTransactionSubmissionsが呼び出される前の状態が変化しているにもかかわらず。 Firebugを使用してさらにデバッグすると、1）関数がすべて正しく呼び出されていること、2）addTo/removeFromTransactionSubmissionsに状態を設定しないと、すべてが問題なく実行されていること、3）handleCheckboxClickが完全に終了した後、

ReactjsがDOMを更新しようとしているときに何らかの理由で状態が失われていると思われます。しかし、なぜこれが当てはまるのか分からず、さらにデバッグする方法がわかりません。また、チェックボックスは子コンポーネントにあり、transactionSubmissionsステートは親にあり、チェックボックスをクリックすると、transactionSubmissionsが変更されます（Child Actionは親ステートを変更します）。これが問題について間違ったやり方であれば教えてください。

基本的には、ボックスをクリック/クリック解除するたびに、対応するオブジェクトをオブジェクトのIDマップとの間で削除します。間違って何かしていますか？

ありがとうございました！

Answer 1

私は別のaproachを使うべきだと思います。

handleCheckboxClick : function (e) { 
    this.setState({isChecked : e.target.checked}) 
} 

また、あなたはそれがいくつかのエラーをスローすることができ、sequencially SETSTATEを呼び出すべきではありません

componentWillUpdate() 
{ 
      if (this.state.isChecked) 
      { 
       this.props.addToTransactionSubmissions(
       this.props.submissionGuid, 
       this.props.paymentInfo); 
      } else { 
      this.props.removeFromTransactionSubmissions(this.props.submissionGuid); 
      } 
} 

の方法componentWillUpdate（https://facebook.github.io/react/docs/component-specs.html#updating-componentwillupdate）またはcomponentDidUpdate（https://facebook.github.io/react/docs/component-specs.html#updating-componentdidupdate）を追加し、状態変化後が発生しなければならない変更を処理コンポーネントの更新中にそのコンポーネントを変更しようとしています。

あなたのコードがsetStateを呼び出すたびに、reactがすべてのdomを調べ、変更内容を確認して変更を再度レンダリングし、処理を保存します。 Ref：https://facebook.github.io/react/docs/component-api.html#setstate