React处理多选框时setState首次勾选无法将值存入状态问题

React的状态更新为异步批量执行机制：

• 调用setChosenSpeciality后，React不会立刻修改当前函数作用域内的chosenSpeciality变量，而是将更新任务加入异步队列，等当前事件回调的所有同步代码执行完毕后，才会更新状态并触发组件重渲染。
• 你在setChosenSpeciality后立即打印状态、调用filterBySpecialty时，取到的始终是本次更新前的旧状态值，首次勾选时旧数组为空，所以会出现“值没存入状态”的错觉，实际上状态更新会在组件下一次渲染时生效。

方案1：提前构造新状态值，直接复用 #

先计算出更新后的选中数组，再同时用于状态更新和后续逻辑调用，避免依赖旧的状态变量：

function onChange (e: any) {
  const isChecked = e.target.checked
  const value = e.target.value
  let newChosenSpeciality
  if(isChecked) {
    newChosenSpeciality = [...chosenSpeciality, value]
  } else {
    newChosenSpeciality = chosenSpeciality.filter(item => item !== value)
  }
  // 更新状态
  setChosenSpeciality(newChosenSpeciality)
  // 直接用新构造的数组执行后续逻辑
  console.log('added array', newChosenSpeciality)
  filterBySpecialty(newChosenSpeciality)
}

方案2：通过useEffect监听状态变化执行后续逻辑 #

如果后续筛选逻辑需要和最新状态强绑定，可以把逻辑抽到useEffect中，状态更新后自动触发：

import { useEffect } from 'react'

// 监听选中状态变化，自动执行筛选
useEffect(() => {
  console.log('最新选中数组', chosenSpeciality)
  filterBySpecialty(chosenSpeciality)
}, [chosenSpeciality])

function onChange (e: any) {
  const isChecked = e.target.checked
  const value = e.target.value
  // 用函数式更新写法，确保拿到上一次的最新状态，避免闭包问题
  if(isChecked) {
    setChosenSpeciality(prev => [...prev, value])
  } else {
    setChosenSpeciality(prev => prev.filter(item => item !== value))
  }
}

额外优化建议 #

Checkbox属于表单元素，绑定onChange事件比onClick更符合规范，能避免部分异常触发问题：

<Checkbox  
  type="checkbox"
  name={specialty}
  value={specialty} 
  key={index}
  onChange={onChange} // 替换原有的onClick
/>

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