React下拉框onChange触发setState报is not a function错误

前端开发中实现下拉选择框交互：下拉选项遍历已完成初始化的状态数据渲染，用户选中对应选项后，需要将选中结果存入独立状态。

• 下拉选择框组件代码：

<select className='selectio-box' name="experience-selection" id="experience-selection" onChange={onExperienceDecision}>
  {
    experienceData.myExperiences.map(e => {
      return (
        <option value={e._id}>{e.createdAt}, ({e._id})</option>
      )
    })
  }
</select>

• 初始版本的选中事件处理函数：

const onExperienceDecision = (event) => {
  event.preventDefault();
  const experienceIdChoice = event.target.value;
  setExperienceChoice({value: experienceIdChoice });
  console.log(experienceChoice)
}

• 执行setExperienceChoice逻辑尝试存储选中值时，控制台抛出错误：Uncaught TypeError: setState is not a function
• 移除setExperienceChoice调用、仅保留选中值打印逻辑时，控制台可以正常输出选中的目标id值
• 报错截图如下：
  

报错的核心是当前代码作用域内的setExperienceChoice不是React提供的合法状态更新函数，常见触发场景：

• 调用useState声明状态时，解构顺序写反、漏写setter，比如把标准的const [状态值, 更新函数] = useState()结构写成顺序颠倒，或者只声明了状态变量没接收更新函数
• 如果setExperienceChoice是从父组件通过props传入的，大概率是父组件传参时拼写错误、漏传了对应的更新方法，导致当前拿到的setExperienceChoice是undefined或者其他非函数类型值

额外提一个代码逻辑误区：就算修复了setter的问题，在调用setExperienceChoice后立刻打印experienceChoice也拿不到最新值，React的状态更新是异步批处理的，调用更新方法后不会立刻同步修改状态变量的值。另外select元素的change事件没有需要阻止的默认行为，event.preventDefault()这行代码是多余的。

1. 检查本组件内的状态声明，确保useState的解构顺序、命名完全正确，标准写法如下：

// 固定顺序：第一个返回值是状态数据，第二个是状态更新函数，顺序不能调换
const [experienceChoice, setExperienceChoice] = useState({ value: '' });

2. 如果setExperienceChoice来自父组件传参，逐层检查props传递链路，确认没有拼写错误、漏传问题，确保传入的是对应的状态更新函数。
3. 调整事件处理逻辑，移除多余的preventDefault调用，如果要验证状态更新结果，通过useEffect监听状态变化打印即可，修正后的完整代码参考：

// 状态声明
const [experienceChoice, setExperienceChoice] = useState({ value: '' });

// 选中事件处理
const onExperienceDecision = (event) => {
  const experienceIdChoice = event.target.value;
  setExperienceChoice({ value: experienceIdChoice });
}

// 监听状态变化，验证更新结果
useEffect(() => {
  console.log('最新选中值：', experienceChoice);
}, [experienceChoice]);

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