反应状态如何工作？

Posted 2023-02-22

【中文标题】反应状态如何工作？

【英文标题】：How react state works?

【发布时间】：2019-07-01 05:47:56

【问题描述】：

我正在使用受控表单并具有 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 函数之后。为什么相同的值不同？

【问题讨论】：

reactjs.org/docs/faq-state.html

【参考方案1】：

这里有两点需要注意

setState 是 asynchronous，因此它不会立即反映更改 其次，当您使用console.log() 记录一个对象时，它会在您展开它后进行评估，因此到那时值会更新。因此，您会看到 之间的区别

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

【参考方案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  
    );

    

【讨论】：

这两个console.log在setState之前打印不同的值