Formik初始值及验证Schema未随formKey更新的解决方法咨询

问题核心是Formik组件默认只会在首次挂载时读取initialValues和validationSchema，后续即使这两个props变化，也不会自动重新初始化表单或更新验证规则——哪怕formKey已经是最新值，Formik内部还是在使用缓存的旧值。

下面给两种实用的解决方法：

方法一：给Formik组件加key强制重建 #

这是最直接的方案，利用React的key特性：当key变化时，React会销毁旧的Formik组件实例，创建新的实例，自然会读取最新的initialValues和validationSchema。

修改你的代码，给Formik加上key={formKey}：

<Formik
  key={formKey}
  initialValues={formKey === 1 ? initialValues : formKey === 2 ? profileUrlsInitialValues : csvFileInitialValues}
  onSubmit={() => {}}
  validationSchema={formKey === 1 ? addLeadsValidationSchema : formKey === 2 ? profileUrlsValidationSchema : uploadCsvValidationSchema}
  validateOnMount
>
  {/* 你的表单内容 */}
</Formik>

这个方法适合不同formKey对应的表单结构差异较大的场景，缺点是切换时会重置所有表单状态（但通常切换表单本来就需要清空旧数据，所以影响不大）。

方法二：手动监听formKey变化，调用resetForm更新 #

如果需要更灵活的控制（比如保留部分状态），可以用Formik的resetForm方法，配合useEffect监听formKey的变化，手动重置表单并更新验证规则。

推荐把初始值和验证规则的判断逻辑抽成辅助函数，让代码更清晰：

import { useFormik } from 'formik';

// 抽离初始值逻辑
const getInitialValues = (key) => {
  switch(key) {
    case 1: return initialValues;
    case 2: return profileUrlsInitialValues;
    default: return csvFileInitialValues;
  }
};

// 抽离验证规则逻辑
const getValidationSchema = (key) => {
  switch(key) {
    case 1: return addLeadsValidationSchema;
    case 2: return profileUrlsValidationSchema;
    default: return uploadCsvValidationSchema;
  }
};

// 使用useFormik钩子创建表单实例
const formik = useFormik({
  initialValues: getInitialValues(formKey),
  validationSchema: getValidationSchema(formKey),
  onSubmit: () => {},
  validateOnMount: true,
});

// 监听formKey变化，手动重置表单
useEffect(() => {
  formik.resetForm({
    values: getInitialValues(formKey),
  });
  // 如果验证规则需要动态更新，直接重新设置即可
  formik.setValidationSchema(getValidationSchema(formKey));
}, [formik, formKey]);

// 渲染表单（需要用Formik的组件或者手动绑定props）
return (
  <form onSubmit={formik.handleSubmit}>
    {/* 表单字段示例 */}
    <input
      name="email"
      value={formik.values.email}
      onChange={formik.handleChange}
      onBlur={formik.handleBlur}
    />
    {formik.touched.email && formik.errors.email && <div>{formik.errors.email}</div>}
    {/* 其他字段 */}
    <button type="submit">提交</button>
  </form>
);

这种方法不会销毁组件，只是重置表单状态，适合表单结构类似、需要保留部分非表单状态的场景。

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