Reactjs:复选框状态为更新，然后在回调函数终止时恢复

Question

我还没反应过来，今天遇到了一个奇怪的问题。我有一个叫做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
                );
            }
        }
    );
}

此特定函数调用一个通过名为addTo/removeFromTransactionSubmission的父级传递的函数。两者的代码如下：

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状态在父组件中，单击复选框后，transactionSubmessions将被修改（子操作将修改父组件状态）。如果这是解决问题的错误方法，请告诉我。

基本上，我想做的是，每次单击/取消单击一个框时，它都会将相应的对象从id映射中删除。我是不是做错了什么？

谢谢你的帮助！

Answer 1

我认为您应该使用另一种方法。

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

添加方法componentWillUpdate(https://facebook.github.io/react/docs/component-specs.html#updating-componentwillupdate）或componentDidUpdate(https://facebook.github.io/react/docs/component-specs.html#updating-componentdidvpdate），并在那里处理状态更改后必须发生的更改

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

此外，您不应该按顺序调用setState，它可能会在更新组件时尝试变异，从而引发一些错误。

每次代码调用setState时，react都会遍历所有dom，检查发生了什么更改并再次呈现更改，从而节省处理时间。参考编号：https://facebook.github.io/react/docs/component-api.html#setstate