React复选框未使用传入值，值为false时始终处于选中状态问题排查

核心问题及修复方案 #

1. 点击事件逻辑错误 #

当前的handleAnswersCheckbox仅将表单已有的值重新赋值给对应字段，未做状态取反操作，点击后值不会发生变化，自然无法切换选中状态。
修复后代码：

const handleAnswersCheckbox = (q: Question): ((evt: ChangeEvent<HTMLInputElement>) => void) => {
  return () => {
    // 取当前值的反作为新值赋值
    setFieldValue(q.id, !values[q.id])
  }
}

2. useEffect赋值逻辑存在判断缺陷 #

原有useEffect中存在!values[foundQuestion.id]的判断条件，仅当对应字段值为假时才会赋值，会导致两个问题：

• 当ans.answer为false时，永远不会给对应字段赋值为false
• 手动将字段改为false后，useEffect触发时会再次把ans.answer的值覆盖回去，导致修改失效
  修复方案：去掉多余的非假判断，若仅需要初始化赋值一次，可调整依赖项减少不必要的触发：

useEffect(() => {
  if (recent && !(recent instanceof RequestError)) {
    recent.answers.forEach((ans) => {
      const foundQuestion = questions.find((q) => q.id === ans.questionId)
      // 移除!values[foundQuestion.id]判断，匹配到问题直接赋值
      if (foundQuestion) {
        setFieldValue(foundQuestion.id, ans.answer)
      }
    })
  }
// 仅保留recent作为依赖，避免重复执行覆盖用户手动修改的值
}, [recent])

3. 值类型不匹配 #

代码中将values断言为Record<string, string>，说明表单值可能存储为字符串类型，而复选框的checked属性需要接收布尔值。如果字段值为字符串"false"，布尔转换后会被判定为true，导致复选框始终显示选中。
修复方案：给复选框的checked属性做显式布尔转换，或者统一将复选框对应的表单字段类型设为布尔值：

<input 
  type="checkbox"
  checked={Boolean(values[q.id])}
  onChange={handleAnswersCheckbox(q)}
/>

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