狀態如何反應？

Question

我正在使用受控表格並具有handleChange函數，該函數獲取輸入值並將其保存在state.mainField.firstInput之類的狀態中。

handleChange = (e) => {
    // the input value was 2, then I enter 3
    console.log(this.state.mainField.firstInput); // expect 2
    console.log(this.state); // expect { mainField: { firstInput: 3 } }
    /*
     ...
    */
    this.setState({ mainField: newData });
}
 /*
  ...
 */
<form>
  <input value={this.state.mainField.firstInput} onChange={this.handleChange} />
</form>

當我嘗試將state.mainField.firstInput打印到handleChange函數頂部的控制台時，在同一字段中的state得到了不同的結果。 確切的firstInput屬性是當前狀態值，而對象this.state中的屬性就像setState函數之后一樣。 為什么這些相同的值不同？

Answer 1

這里有兩件事要注意

1. setState是asynchronous ，因此不會立即反映更改
2. 其次，當您使用console.log()記錄對象時，將在展開對象后對其進行求值，因此該值將被更新。 因此，您會看到

console.log(this.state.mainField.firstInput); // expect 2
console.log(this.state); // expect { mainField: { firstInput: 3 } }

Answer 2

JavaScript是一種同步和單線程語言。 因此它逐行運行

您在狀態更改之前進行控制台日志記錄，因此顯然可以得到2。即使在設置狀態之后進行console.log記錄，也可能無法獲得預期的結果，因為設置狀態需要花費一些時間來執行。

//這可能會或可能不會

    handleChange = (e) => {
    // the input value was 2, then I enter 3
    console.log(this.state.mainField.firstInput); // expect 2        

    this.setState({ mainField: newData });
    console.log(this.state); // expect { mainField: { firstInput: 3 } }
}

但這肯定會起作用

 handleChange = (e) => {
        // the input value was 2, then I enter 3
        console.log(this.state.mainField.firstInput); // expect 2        

        this.setState({ mainField: newData },()=>{
console.log(this.state); // expect { mainField: { firstInput: 3 } }
    });

    }