useState Hook问题：调用setState后获取的状态值与传入值不符

AI 小北

2026-8-1

React Select菜单状态更新后打印不一致的问题解决

问题根源

React里useState返回的状态更新函数是异步批量执行的，调用setClassGrade(e.target.value)后，classGrade不会立刻变成新值。在onChange事件里直接打印的classGrade，还是当前组件渲染周期里的旧状态，所以和你选中的e.target.value对不上。

解决办法

办法1：用useEffect监听状态变化

当classGrade真正更新完成、组件重新渲染后，useEffect会自动触发，这时打印的就是最新状态：

import { useState, useEffect } from 'react';

const classGrades = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const ClassSelect = () => {
  // 状态用const声明更规范，因为不能直接赋值修改
  const [classGrade, setClassGrade] = useState(1);

  // 监听classGrade变化，状态更新后执行打印
  useEffect(() => {
    console.log(`classgrade 更新为：${classGrade}`);
  }, [classGrade]);

  return (
    <div>
      <select 
        value={classGrade} 
        onChange={(e) => {
          const selectedVal = e.target.value;
          console.log(`选中了：${selectedVal}`);
          setClassGrade(selectedVal);
        }}
      >
        {classGrades.map(g => <option key={g} value={g}>{g}</option>)}
      </select>
    </div>
  );
};

办法2：直接打印选中的值（如果只是确认选中内容）

如果只是想知道用户选了什么，没必要等状态更新，直接打印e.target.value就行，这个值是实时的：

<select 
  value={classGrade} 
  onChange={(e) => {
    const selectedVal = e.target.value;
    setClassGrade(selectedVal);
    console.log(`选中了：${selectedVal}`);
    // 这里别打印classGrade，它还没更新呢
  }}
>
  {classGrades.map(g => <option key={g} value={g}>{g}</option>)}
</select>