React中如何处理多复选框并收集已选中复选框的值

核心错误点 #

• React 状态更新是异步批量执行的，调用setCheckboxState后，当前作用域内拿到的checkboxState还是更新前的旧值，此时立即调用collectCheckedCheckboxes处理的是旧状态，逻辑自然不符合预期。
• 违反 React 不可变数据原则：直接对状态数组checkedCheckboxes调用push、slice方法修改原数组，没有调用setCheckedCheckboxes提交状态更新，React 无法感知到状态变化，也不会触发重渲染。且slice本身不会修改原数组，仅返回切割后的新数组，你写的删除逻辑本身就不生效。
• collectCheckedCheckboxes逻辑存在设计缺陷：每次遍历都直接往已有数组中添加元素，没有清空旧数据，会导致选中项重复添加；取消选中时也没有正确匹配要移除的元素，自然删不掉对应项。

修复方案 #

最优方案：取消冗余状态 #

你完全不需要单独维护checkedCheckboxes状态，checkboxState已经和receivedData一一对应，需要使用选中项时直接推导即可，免去两个状态同步的问题：

// 需要用到选中项的地方直接计算即可，不需要单独存state
const checkedCheckboxes = receivedData.filter((_, index) => checkboxState[index])

若确实需要单独维护选中项状态 #

直接在更新复选框状态的同时计算新的选中数组，不需要单独写收集方法：

// 状态定义保持不变
const [checkboxState, setCheckboxState] = useState(new Array(receivedData.length).fill(false));
const [checkedCheckboxes, setCheckedCheckboxes] = useState([]);
  
const handleCheckboxState = (position: number) => {
  const updatedCheckedState = checkboxState.map((item, index) => (index === position ? !item : item));
  setCheckboxState(updatedCheckedState);
  // 直接用最新的复选框状态生成选中项数组
  const newCheckedList = receivedData.filter((_, index) => updatedCheckedState[index]);
  setCheckedCheckboxes(newCheckedList);
};

渲染逻辑不需要做任何修改。

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