React Hooks 选中座位数组存入状态变量取值异常排查

• 已选座位集合seatsSelected使用普通变量声明，未纳入React状态管理。组件每次重渲染时该变量都会被重置为空数组，之前存储的选中座位数据直接丢失，所有依赖该数组的统计、计数逻辑都无法获取正确值。
• 复选框选中逻辑中无意义使用await：Array.push是同步操作，对其使用await不会起到等待执行的作用，反而会干扰逻辑执行时序。
• 购票数量递减逻辑判断条件完全写反：原逻辑判断counter >= seatsSelected.length时才允许递减，和“计数大于0即可递减、不能减为负数”的实际规则完全不符。
• 状态更新调试逻辑存在误区：React的状态更新是异步批处理的，调用setSeatCount后立刻打印原seatCount变量拿不到最新值，属于React的正常特性，不属于功能bug，但会干扰调试判断。

• 将已选座位数组纳入React状态管理，所有增删操作都通过状态更新方法执行，保证数据不会因重渲染丢失，且修改后能同步到所有依赖该数据的逻辑中。
• 删除复选框逻辑中无意义的async/await写法，改用不可变数据的方式更新座位数组。
• 修正购票数量增减的边界判断：递增上限为已选座位总数量，递减下限为0。
• 打开弹窗时重置购票计数，避免上一次操作的计数残留。

状态定义与复选框选中逻辑 #

const [seatCount, setSeatCount] = React.useState(0);
const [open, setOpen] = React.useState(false);
const [counter, setCounter] = React.useState(0);
// 已选座位纳入状态管理
const [seatsSelected, setSeatsSelected] = React.useState([]);

const handleChecked = (e) => {
  const isChecked = e.target.checked;
  const currentSeat = e.target.name;
  if (isChecked) {
    // 用不可变更新方式追加选中座位
    setSeatsSelected(prev => [...prev, currentSeat]);
  } else {
    // 取消选中时过滤对应座位
    setSeatsSelected(prev => prev.filter(name => name !== currentSeat));
  }
}

弹窗与购票数量控制逻辑 #

const handleClickOpen = () => {
  setOpen(true);
  const seatTotal = seatsSelected.length;
  setSeatCount(seatTotal);
  // 打开弹窗时重置购票计数，避免上次选择残留
  setCounter(0);
};

const handleClose = () => {
  setOpen(false); 
};

const handleIncrement = () => {
  // 购票数不能超过已选座位总数
  if (counter < seatsSelected.length) {
    setCounter(counter + 1);
  }
};

const handleDecrement = () => {
  // 购票数不能小于0
  if (counter > 0) {
    setCounter(counter - 1);
  }
};

如果需要查看状态更新后的值，不要在调用set方法后立刻打印原状态变量，可以把打印逻辑放到useEffect中监听对应状态变化，即可拿到最新值。

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