Formik状态无法持久化，切换容器时反复初始化如何解决？

问题根源 #

你的useMyViewModel自定义Hook每次被ContainerA、ContainerB调用时，都会重新执行内部代码，包括useFormik的初始化逻辑。这导致每个容器组件拿到的都是独立的Formik实例，它们的touched、values等状态完全隔离，切换容器后自然只会保留当前操作实例的字段状态。

解决方案：让所有容器共享同一个Formik实例 #

核心思路是将Formik实例的创建提升到所有子容器的共同父组件中，通过props或React Context传递给子容器，确保所有组件使用同一个实例。

方案1：通过props传递Formik实例（简单直接）

修改主容器，在其中创建Formik实例，再传递给子容器：

// 主容器组件
const MainContainer = () => {
  // 只在主容器初始化一次Formik实例
  const formik = useFormik({
    initialValues: {}, // 填入你的初始值
    validationSchema: /* 你的schema */,
    onSubmit: (values) => {
      // 提交逻辑
    }
  });

  const [valueA, setValueA] = useState(/* 初始值 */);

  const onChangeValuesHandler = (event) => {
    formik.handleChange(event);
    setValueA(event.target.value);
  };

  return (
    <form onSubmit={formik.handleSubmit}>
      {/* 将共享的formik实例和相关方法传递给子容器 */}
      <ContainerA formik={formik} valueA={valueA} onChange={onChangeValuesHandler} />
      <ContainerB formik={formik} />
    </form>
  );
};

子容器直接使用传入的Formik实例：

// ContainerA组件
const ContainerA = ({ formik, valueA, onChange }) => {
  return (
    <div>
      <input
        name="fieldA"
        value={formik.values.fieldA || ''}
        onChange={onChange}
        onBlur={formik.handleBlur}
      />
      {/* 其他表单元素 */}
    </div>
  );
};

方案2：使用React Context共享Formik实例（适合复杂组件树）

如果子容器层级较深，用props传递太繁琐，可以用Context来全局共享Formik实例：

1. 创建Formik上下文和Provider：

import { createContext, useContext } from 'react';
import { useFormik, FormikProps } from 'formik';

// 创建Formik上下文
const FormikSharedContext = createContext<FormikProps<any> | null>(null);

// 定义Provider组件，封装Formik实例的创建
export const FormikSharedProvider = ({ children, initialValues, validationSchema }) => {
  const formik = useFormik({
    initialValues,
    validationSchema,
    onSubmit: (values) => {
      // 提交逻辑
    }
  });

  return (
    <FormikSharedContext.Provider value={formik}>
      {children}
    </FormikSharedContext.Provider>
  );
};

// 自定义Hook，用于获取共享的Formik实例
export const useSharedFormik = () => {
  const formik = useContext(FormikSharedContext);
  if (!formik) {
    throw new Error('useSharedFormik必须在FormikSharedProvider内部使用');
  }
  return formik;
};

2. 在根组件或主容器外层包裹Provider：

// 根组件/App组件
const App = () => {
  return (
    <FormikSharedProvider
      initialValues={{}} // 你的初始值
      validationSchema={/* 你的schema */}
    >
      <MainContainer />
    </FormikSharedProvider>
  );
};

3. 子容器中使用共享的Formik实例：

// ContainerA组件
const ContainerA = () => {
  const formik = useSharedFormik();
  const [valueA, setValueA] = useState(/* 初始值 */);

  const onChangeValuesHandler = (event) => {
    formik.handleChange(event);
    setValueA(event.target.value);
  };

  return (
    <input
      name="fieldA"
      value={formik.values.fieldA || ''}
      onChange={onChangeValuesHandler}
      onBlur={formik.handleBlur}
    />
  );
};

注意事项 #

• 不要在自定义Hook中直接初始化Formik实例，除非Hook本身能保证实例的唯一性（比如结合useMemo并设置正确的依赖，但这种方式不如父组件提升或Context可靠）。
• 确保所有表单元素的name属性与Formik的initialValues字段对应，这样handleChange才能正确更新状态。

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