Javascript 反应状态如何工作？

我使用的是受控表单和handleChange函数，它获取输入值并将其保存在state.mainField.firstInput等状态

---

当我尝试将state.mainField.firstInput打印到handleChange函数顶部的控制台时，我在同一字段中得到了不同的state结果。确切的firstInput属性是当前状态值，而对象this.state中的属性类似于setState函数之后的属性。为什么相同的值不同？

这里需要注意两件事

setState是异步的，因此它不会立即反映更改 其次，当您使用console.log记录对象时，将在展开对象后对其进行求值，因此，此时该值将更新。因此，您可以看到 console.logthis.state.mainField.firstInput；//期望2 console.logthis.state；//应为{mainField:{firstInput:3}

---

这里有两件事需要注意

setState是异步的，因此它不会立即反映更改 其次，当您使用console.log记录对象时，将在展开对象后对其进行求值，因此，此时该值将更新。因此，您可以看到 console.logthis.state.mainField.firstInput；//期望2 console.logthis.state；//应为{mainField:{firstInput:3}

---

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

    }

---

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在设置状态之前打印不同的值这两个console.log在设置状态之前打印不同的值