javascript - Reactjs setState 上的一次性错误(？)

Question

console.log(newState);
this.setState(newState);
this.validateFieldsAndUpdateForm(type);
console.log(this.state);

当我在执行上述操作后注销 newState 和 this.state 时，似乎更改尚未保留，直到我再次点击此按钮并对状态。

newState = {
    contact:
        firstName: “joe”
        lastName: “schmoe”
}

this.state = {
    contact:
        firstName: “joe”
        lastName: “”
}

我想我需要在这里回调，以便我只在 newState 覆盖 this.state 时执行第二个命令。

this.setState(newState, this.validateFieldsAndUpdateForm(type));

它将 newState 添加到状态中，因此 this.state 看起来像这样:

{
    contact: 
    newState:
        contact:
}

而且回调也没有执行，这让我相信我注入(inject)了错误。如何让 newState 的 contact 立即覆盖原始联系人，而不是在下次调用 setState 时覆盖？

Answer 1

您遇到此问题的原因是 this.setState 不能保证立即执行。来自 documentation :

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value.

您可以传入一个函数作为回调以在状态更改发生后立即执行，这是正确的，但您并没有完全这样做。

this.setState(newState, this.validateFieldsAndUpdateForm(type));

这是立即执行函数 this.validateFieldsAndUpdateForm(type)，而您希望传入一个回调以在状态转换后执行。所以你正在寻找的是这样的:

this.setState(newState, function () {
    this.validateFieldsAndUpdateForm(type);
});

这应该可以解决这个问题。我不确定如何解释你问题的最后部分。如果您可以在评论中澄清，我将编辑我的答案以提供帮助。