为什么React中Checkbox的checked属性无法正确控制表单勾选状态？

核心问题1：接口返回的isAdmin字段类型异常 #

这是这类问题最高发的原因：多数后端接口返回布尔字段时，会序列化为字符串格式的'true'/'false'，而非原生布尔值。如果直接将字符串类型的值赋值给isAdmin状态，即使是字符串'false'，在JS布尔判断中也属于真值，会导致checked属性一直为true，复选框状态完全不符合预期。
修复方式：修改useEffect中的赋值逻辑，将字段强转为布尔值：

setIsAdmin(Boolean(user.isAdmin))

核心问题2：useEffect触发逻辑导致本地状态被覆盖 #

当前useEffect的依赖包含了完整的user对象，后续如果有其他操作修改了Redux中user对象的其他属性（比如用户名、邮箱），会触发useEffect重新执行，直接把你本地修改后的isAdmin状态覆盖回Redux中存储的旧值。
优化方式：调整useEffect的判断逻辑和依赖项，避免不必要的状态覆盖：

useEffect(()=>{
    if(!user?._id || user._id !== userId){
        dispatch(getUserDetails(userId))
    }else{
        setName(user.name)
        setEmail(user.email)
        setIsAdmin(Boolean(user.isAdmin))
    }
}, [dispatch, userId, user?._id, user?.name, user?.email, user?.isAdmin])

临时排查/兼容方案 #

如果修改后还是不生效，可以用下面两种方式快速定位问题：

• 加日志确认状态变化：在onChange和组件顶层打印isAdmin值，确认点击复选框时状态是否正常更新
• 给Form.Check加key属性强制重渲染，解决React-Bootstrap版本兼容导致的视图不更新问题：

<Form.Check
  key={isAdmin}
  label='If Admin then Check'
  id='useradmin'
  type='checkbox'
  checked={isAdmin}
  onChange={(e) => setIsAdmin(e.target.checked)}
/>

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