初始值为null时Formik不重新初始化，已开enableReinitialize如何解决？

问题原因 #

这个问题的核心诱因分为两点：

1. React原生表单控件不支持null作为合法的value属性值，当传入null时控件会被自动切换为非受控模式，无法响应Formik的状态同步
2. Formik默认的初始值比对逻辑在部分场景下无法精准识别null值带来的变更，即使开启enableReinitialize也不会触发全量状态重写

可用解决方案 #

• 方案1：给Formik组件绑定唯一key（最简便）
  给Formik组件添加key属性，值为当前编辑记录的唯一标识（如记录ID），切换记录时Formik会直接销毁重建，完全清空旧状态，无需额外处理空值：

  <Formik
    key={currentRecord.id}
    initialValues={currentRecord}
    enableReinitialize={true}
    // 其余Formik配置
  >
    {/* 表单内容 */}
  </Formik>
  

• 方案2：初始化前转换null值
  在给Formik传入initialValues之前，先统一把所有null字段转换为空字符串或对应类型的默认值，确保表单控件接收合法的受控值：

  // 空值转换工具函数
  const normalizeInitialValues = (record) => {
    return Object.fromEntries(
      Object.entries(record).map(([field, value]) => [field, value ?? ''])
    )
  }
  
  // 调用时传入转换后的值
  <Formik
    initialValues={normalizeInitialValues(currentRecord)}
    enableReinitialize={true}
  >
  

• 方案3：表单控件层面做空值兼容
  在绑定Field字段时，对传入控件的value做兜底处理，避免直接传入null：

  <Field name="lastName">
    {({ field }) => (
      <input 
        {...field} 
        value={field.value ?? ''} // null兜底为空字符串
      />
    )}
  </Field>
  

• 方案4：自定义初始值比对逻辑
  显式传入isInitialEqual自定义比对函数，覆盖Formik默认的比对逻辑，精准识别null值的变更：

  import { isEqual } from 'lodash';
  
  <Formik
    initialValues={currentRecord}
    enableReinitialize={true}
    isInitialEqual={(prevValues, nextValues) => isEqual(prevValues, nextValues)}
  >
  

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