Question

我正在使用受控表格，并且具有 handleChange 功能，该功能获取输入值并将其保存为 state.mainField.firstInput 之类的状态。 / p>

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

这里有两件事要注意

setState是asynchronous，因此不会立即反映出更改
第二，当您使用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 } }
    });

    }

反应状态如何运作？

2 个答案: