React应用为何打印下拉框的上一次选中值？

React 中的 setState 是异步执行的，调用 setState 后组件的 state 不会立刻更新。你在调用 setState 后马上打印 this.state.select，此时 state 还未完成更新，所以拿到的是上一次的旧值。

方法一：利用 setState 的回调函数 #

setState 支持传入第二个参数（回调函数），这个函数会在 state 成功更新后执行，此时可以拿到最新的 state 值：

select = (event) => {
    this.setState({ select: event.target.value }, () => {
        console.log(this.state.select); // 这里输出最新选中值
    });
};

方法二：直接使用事件对象的 value #

event.target.value 本身就是当前选中的最新值，你可以直接打印这个值，无需等待 state 更新：

select = (event) => {
    const selectedVal = event.target.value;
    this.setState({ select: selectedVal });
    console.log(selectedVal); // 直接输出当前选中值
};

你的代码里存在拼写错误：state 中的 vlaue 应该改为 value，虽然这不会影响当前的 select 组件问题，但修正后可以避免后续其他逻辑出现意外 bug。

内容的提问来源于stack exchange，提问作者mohammad