React默认选中的复选框无法取消勾选问题排查

核心问题1：默认选中后无法取消勾选 #

你的useEffect依赖了isChecked，每次isChecked变化都会触发这个钩子。而钩子内部又判断if (defaultChecked)就调用setChecked(true)——这意味着哪怕用户手动取消勾选（把isChecked设为false），useEffect会立刻触发，因为defaultChecked还是传入的true，又把isChecked强制设回true，导致无法取消。

核心问题2：useEffect依赖不全 #

当前useEffect只依赖了isChecked，但钩子内部用到了isValue、isParams、name、setFormMainData、setFormParamsData等变量，这些都应该加入依赖数组，否则会因为闭包问题使用旧值，导致逻辑错误。

修复步骤 #

1. 初始化isChecked时直接使用defaultChecked
   把const [isChecked, setChecked] = useState(false)改成const [isChecked, setChecked] = useState(defaultChecked)，组件挂载时直接设置初始状态，不需要在useEffect里重复处理，避免强制覆盖用户的手动操作。

2. 清理useEffect里的defaultChecked判断逻辑
   移除useEffect中if (defaultChecked) { setChecked(true) }这段代码，初始状态已经通过useState设置完成。

3. 补全useEffect的依赖数组
   将useEffect的依赖数组改为[isChecked, isValue, isParams, name, setFormMainData, setFormParamsData]，确保所有用到的外部变量都被监听。

4. 可选优化：简化条件判断
   将disabled={isChecked ? false : true}简化为disabled={!isChecked}，代码更简洁易读。

修复后的完整代码 #

const InputOptional = ({ id, content, name, isParams, setFormMainData, removeFormMainData, setFormParamsData, removeFormParamsData, defaultChecked }) => {
  const checkboxId = COMPONENT_TYPES.checkbox + id
  const [isValue, setValue] = useState(content)
  // 直接用defaultChecked初始化isChecked
  const [isChecked, setChecked] = useState(defaultChecked)

  useEffect(() => {
    if (isChecked && isValue !== null) {
      !isParams
        ? setFormMainData(ToolsClass.toFormObject(name, isValue))
        : setFormParamsData(ToolsClass.toFormObject(name, isValue))
    }
  }, [isChecked, isValue, isParams, name, setFormMainData, setFormParamsData]) // 补全所有依赖

  const handleChange = (event) => {
    setValue(event.target.value)
  }

  const handleCheck = () => {
    if (isChecked && isValue !== null) {
      !isParams
        ? removeFormMainData(name)
        : removeFormParamsData(name)
    }
    setChecked(!isChecked)
  }

  return (
    <div style={wrapperStyle}>
      <StyledInput 
        id={id} 
        autocomplete='on' 
        name={id} 
        placeholder={isValue} 
        onChange={handleChange} 
        value={isChecked ? isValue : ''} 
        disabled={!isChecked}
      />
      <StyledCheckbox 
        id={checkboxId} 
        name={checkboxId} 
        type={COMPONENT_TYPES.checkbox} 
        onChange={handleCheck} 
        checked={isChecked}
      />
    </div>
  )
}

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