Next.js中使用Formik多步骤表单回退重渲染时如何避免输入重置

核心问题根因 #

• 你当前通过QuoteContext定义了全局表单值状态formValues和更新方法setFormValues，但所有步骤组件从未调用该方法同步用户输入，全局状态始终保持初始空值
• Formik的initialValues仅在组件首次挂载时生效一次，不会随后续props变化自动更新；而主页面通过三元条件渲染切换步骤时，非当前步骤的组件会直接从DOM卸载，连带销毁对应绑定的Formik实例，其内部存储的输入值、校验状态随组件卸载完全丢失
• 每个步骤Formik初始化时读取的是空全局状态，返回之前步骤时自然无法加载已填写的内容

具体修改步骤 #

1. 补全跨步骤实时状态同步 #

每个步骤组件的Formik标签中新增输入变化监听，把用户的实时输入合并同步到全局状态中，避免跨步骤的内容覆盖问题。
以QuoteStep1为例，修改后的Formik配置为：

<Formik
  initialValues={formValues}
  // 监听输入变化，合并同步到全局状态
  onChange={(values) => {
    setFormValues(prev => ({ ...prev, ...values }))
  }}
  onSubmit={(values, { setSubmitting }) => {
    // 步骤切换前先同步最新值到全局状态
    setFormValues(prev => ({ ...prev, ...values }))
    setSubmitting(false)
    setStep(2)
  }}
>

同样的逻辑需要在QuoteStep2、QuoteStep3的Formik配置中重复添加，确保任意步骤的输入都会被实时记录到全局存储中。

2. 回退步骤自动加载已填写内容 #

因为全局状态已经实时同步了所有步骤的输入，每个步骤Formik首次挂载时读取initialValues={formValues}，会自动携带已填写的内容初始化表单，不需要额外的状态回填逻辑。
QuoteStep2中现有的回退按钮逻辑onClick={() =>{setStep(1)}}不需要改动，步骤切换后第一步的Formik会从全局状态拿到之前填写的SPR、DFR等字段值，自动填充到输入框中。

3. 实现仅最终提交时重置表单 #

在最后一步QuoteStep3的提交逻辑中，待最终请求成功后再统一清空所有状态，不在步骤切换过程中做提前重置：

// QuoteStep3的Formik提交逻辑
onSubmit={(values, { setSubmitting, resetForm }) => {
  setFormValues(prev => ({ ...prev, ...values }))
  // 此处执行最终的接口提交请求
  setTimeout(() => {
    // 请求成功后执行全局重置
    setFormValues({}) // 清空全局存储的表单值
    resetForm() // 清空当前步骤Formik的内部状态
    setStep(1) // 回到表单起始步骤
    setSubmitting(false)
  }, 400)
}}

可选优化：减少组件卸载的同步开销 #

如果不想依赖实时状态同步，也可以把主页面的条件渲染改为隐藏式渲染，让所有步骤的Formik实例始终保持挂载，仅通过CSS控制显隐，从根源上避免组件卸载带来的状态丢失：

// 主页面步骤渲染逻辑
<div>
  <div style={{ display: step === 1 ? 'block' : 'none' }}>
    <QuoteStep1 />
  </div>
  <div style={{ display: step === 2 ? 'block' : 'none' }}>
    <QuoteStep2 />
  </div>
  <div style={{ display: step === 3 ? 'block' : 'none' }}>
    <QuoteStep3 />
  </div>
</div>

这种方式下所有Formik的内部状态会一直保留，步骤切换时不需要额外同步全局状态，对规模不大的多步骤表单性能影响可以忽略。

额外注意项 #

• QuoteStep1组件中导入的useEfeect存在拼写错误，正确的React钩子导入为useEffect，当前因未实际调用该导入暂时不影响运行，后续扩展逻辑时需要修正避免报错

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