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完成后，复选框变为未选中状态。 / p>

我怀疑无论出于何种原因，当Reactjs尝试更新DOM时，状态正在丢失。但是，我不知道为什么会这样，并且不知道如何进一步调试。为了澄清，复选框位于子组件中，而transactionSubmissions状态位于父组件中，单击复选框时，将修改transactionSubmissions（子操作修改父级状态）。如果这是解决问题的错误方法，请告诉我。

基本上我想要做的是每次单击/取消单击一个框时，它会将对应的对象移入/移出对象的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-componentdidupdate）并处理状态更改后必须发生的更改

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

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

1 个答案: