Question

我真的很抱歉我发布这个，因为它听起来很疯狂。我有一个方法来验证我在模态中的表单中的一些输入。

所以我检查每个this.state.variable并按下一个辅助数组，然后设置为原始的fieldErrors数组。

但出于某种原因，当我在设置前检查aux时，长度为5。设置为fieldErrors后，我注意到长度为0.发生了什么事？

以下是代码：

_validateMissingFields: function() {
    var aux = [];

    if (this.state.variable1.length === 0) {
        aux.push('variable1');
    }

    if (this.state.variable2.length === 0) {
        aux.push('variable2');
    }

    if (this.state.variable3.length === 0) {
        aux.push('variable3');
    }

    if (this.state.variable4.length === 0) {
        aux.push('variable4');
    }

    if (this.state.variable5.length === 0) {
        aux.push('variable5');
    }

    console.log(aux.length) // -> shows 5
    this.setState({ fieldErrors: aux });
}

稍后，当我在此方法后执行this.state.fieldErrors.length时，显示0。

顺便说一下，这就是我正在初始化fieldErrors：

的方式

getInitialState: function() {
    return {
        variable1: '',
        variable2: '',
        variable3: '',
        variable4: '',
        variable5: '',
        fieldErrors: []
    }
},

Answer 1

React setState是异步的，这就是无法立即读取this.state的原因。

有关详细信息，请参阅文档https://facebook.github.io/react/docs/react-component.html#setstate

Answer 2

setState是异步的，正如已经提到的那样，但是它也接受一个回调函数作为第二个参数，所以如果你想用长度做的事情可以在回调中完成，你可以做类似

this.setState({ fieldErrors: aux }, () => {
  console.log(this.state.fieldErrors.length); // Or whatever you're trying to do
};

在数组上设置状态不起作用本地？

2 个答案: