如何在checkbox变更事件中填充布尔值数组并绑定checked选中状态

1. checked属性绑定 #

直接绑定对应索引的answers数组值即可，代码写为：
checked={answers[i]}

2. 修正事件传递与处理逻辑 #

你原有handleChange存在三个问题：

• 没有传入当前点击的checkbox对应索引，无法定位要修改的数组位置
• 用展开运算符追加值的逻辑不符合修改指定索引的需求
• setAnswers是异步更新，同步调用setQuizState时拿不到最新的answers值

修改后的完整代码： #

const Quiz1 = (props) => {
  const [answers, setAnswers] = useState([false, false, false, false]);

  const handleChange = (e, index) => {
    // 生成新数组，仅修改对应索引的布尔值
    const newAnswers = [...answers];
    newAnswers[index] = e.target.checked;
    setAnswers(newAnswers);
    // 用新生成的数组更新store，避免异步问题
    setQuizState({ id: 0, question_id: question.question_id, answer: newAnswers });
  };

  return (
    <>
      {question?.options?.map((option, i) => (
        <Checkbox
          id={i}
          name={option}
          checked={answers[i]}
          onChange={(e) => handleChange(e, i)}
        />
      ))}
    </>
  )
}

逻辑说明 #

• 每个checkbox的选中状态完全和answers数组对应索引的值绑定，保证状态统一
• 触发变更时仅修改对应索引的布尔值，其余位置状态保持不变
• 直接使用新生成的数组更新状态库，避免React异步更新带来的旧值问题，后续提交到服务端时直接取answers数组即可。

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