在數組上設置狀態不起作用本地？

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
};