Formik带后端初始值的复选框无法切换，如何处理checked/defaultChecked？

问题根因 #

你遇到的问题本质是Formik对复选框的默认更新逻辑和你使用的'Y'/'N'存储格式不匹配，并不是checked属性本身不能用。
Formik默认处理复选框的onChange事件时，会将event.target.checked的布尔值直接赋值给对应字段，而你判断选中的逻辑是values.certifyAndReview === 'Y'，布尔值和字符串恒等判断永远为固定结果，就会出现复选框看起来无法切换的问题。
而单选按钮没有该问题是因为Formik对单选按钮的默认处理是将选中项的value属性值赋值给字段，刚好匹配你使用的'Y'字符串格式，所以逻辑正常。

可行解决方案 #

方案1：自定义onChange，继续使用受控checked属性（最推荐） #

手动处理复选框的更新逻辑，将选中状态转换为你需要的'Y'/'N'格式存入Formik values，代码修改如下：

<Form.Control 
  type="checkbox" 
  id="checkCertAgreement" 
  name="certAgreement"
  checked={values.certifyAndReview === 'Y'}
  value="Y"
  onChange={(e) => {
    // 手动将选中状态转为'Y'/'N'更新到Formik
    setFieldValue('certAgreement', e.target.checked ? 'Y' : 'N');
  }} 
  onBlur={handleBlur}   
/>

这种方案属于完全受控组件，不需要关心数据加载时机，只要后端请求返回后Formik的values被正确更新，复选框的选中状态会自动同步，切换逻辑也完全正常。

方案2：调整数据加载时机，等数据返回后再渲染表单 #

给组件添加加载状态，在后端数据请求完成、Formik初始值赋值完成后，再渲染整个表单或者对应复选框，此时使用defaultChecked也能正常生效：

// 组件内添加加载状态
const [loading, setLoading] = useState(true);

useEffect(() => {
  // 你的Ajax请求逻辑
  fetchData().then(res => {
    // 赋值Formik初始值
    setInitialValues(res);
    setLoading(false);
  })
}, []);

// 加载完成后再渲染表单
if(loading) return <div>加载中...</div>

return (
  <Formik initialValues={initialValues}>
    {/* 其余表单内容 */}
    <Form.Control 
      type="checkbox" 
      id="checkCertAgreement" 
      name="certAgreement"
      defaultChecked={values.certifyAndReview === 'Y'}
      value="Y"
      onChange={handleChange} 
      onBlur={handleBlur}   
    />
  </Formik>
)

方案3：适配值格式，直接使用布尔值存储 #

如果后端接口允许适配，可以在拿到后端返回数据时，将'Y'/'N'转换为布尔值存入Formik values，提交时再转回对应字符串即可，这样可以直接复用Formik默认的事件处理逻辑：

// 拿到后端数据时转换格式
const initialValues = {
  ...resData,
  certifyAndReview: resData.certifyAndReview === 'Y'
}

// 提交时转换回后端需要的格式
const onSubmit = (values) => {
  const submitData = {
    ...values,
    certifyAndReview: values.certifyAndReview ? 'Y' : 'N'
  }
  // 调用提交接口
}

// 复选框代码可以直接简化为
<Form.Control 
  type="checkbox" 
  id="checkCertAgreement" 
  name="certAgreement"
  checked={values.certifyAndReview}
  onChange={handleChange} 
  onBlur={handleBlur}   
/>

内容的提问来源于stack exchange，提问作者gene b.