ReactJS中Formik enableReinitialize后复选框初始值不生效问题

你的toggle类型复选框无法加载初始值，核心问题在于没有将Checkbox组件与Formik的表单状态绑定：

• 你使用了独立的本地状态isToggled控制Checkbox显示，但初始化时未从Formik的initialValues中读取对应字段值；
• 点击Checkbox仅修改本地状态，未同步更新Formik的全局表单值，导致状态脱节；
• Checkbox的checked属性未关联Formik的values，无法感知初始值。

通过Formik的useFormikContext钩子获取全局表单状态，将Checkbox与Formik的值绑定，同步初始化与交互状态：

步骤1：导入Formik上下文钩子 #

在CustomField组件文件顶部导入：

import { useFormikContext } from 'formik';

步骤2：获取Formik状态与方法 #

在CustomField组件内部获取Formik的全局values和更新方法：

const { values, setFieldValue } = useFormikContext();

步骤3：重构toggle类型组件 #

修改toggle分支代码，移除本地状态isToggled，直接依赖Formik的values：

case 'toggle':
  // 从Formik全局值中读取toggle字段的当前状态
  const toggleValue = values[toggleKeyValue];

  // 处理切换事件：同步更新Formik的字段值
  const handleToggle = () => {
    setFieldValue(toggleKeyValue, !toggleValue);
  };

  return (
    <>
      <Checkbox 
        id={toggleKeyValue} 
        name={toggleKeyValue}
        checked={toggleValue} // 绑定Formik的值，实现初始值加载
        onChange={handleToggle} // 使用onChange而非onClick，符合表单控件规范
      >
        <BodyText>{label}</BodyText>
      </Checkbox>
      {toggleFields && <DummyDiv />}
      {/* 根据Formik中的toggle值控制后续字段显示 */}
      {forToggle.type === 'text' && toggleValue && (
        <Field type='text' placeholder={`Enter ${label}`} name={name} description={description} />
      )}
      {forToggle.type === 'file_upload' && toggleValue && (
        <FileUploadField name={name} description={description} onlyOne={!forToggle.allowMultipleUploads} />
      )}
    </>
  );

1. 绑定checked属性：通过values[toggleKeyValue]直接从Formik获取初始值，Checkbox会自动加载initialValues中的对应值；
2. 同步状态更新：使用setFieldValue更新Formik的全局值，确保组件状态与Formik状态一致；
3. 替换onClick为onChange：表单控件的状态变更建议使用onChange事件，兼容键盘操作等多种交互场景。

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