基于MUI/Formik/Yup的分步表单：切换步骤时无法传递Formik新Props的问题及设计合理性咨询

嘿，我看了你这个分步表单的实现代码，先聊聊设计合理性，再帮你解决遇到的Formik props传递问题～

一、先说说你的设计合理性 #

你的整体思路是没问题的：

• 用switch根据当前步骤渲染对应页面，逻辑直观清晰，对于4步这种少量步骤的场景非常适用。
• 每个步骤单独用Formik包裹，这种分步隔离Formik的方式有个明显好处：每一步的表单状态、校验规则都独立，不会互相干扰；如果后续需要给某一步单独加特殊校验或提交逻辑，扩展起来也很方便。这个设计本身是完全可行的，不用太担心方向问题。

二、解决「切换步骤时无法传递Formik新Props」的问题 #

看你的代码，我发现了几个导致问题的关键点，以及对应的修复方案：

1. 核心问题：部分步骤未传递Formik props给子组件 #

你在步骤1里正确地把Formik的props传递给了LeadRegistration：

{(formik) => <LeadRegistration ... formik={formik} />}

但步骤3、4的Formik直接渲染子组件时，完全没传formik props，导致子组件拿不到Formik的状态和方法；步骤2虽然传了，但额外加了一个不存在的handleChange={this.handleChange}（你的Form组件里根本没定义这个方法），反而会引发报错。

修复方式：所有步骤的Formik都要通过渲染回调把formik props传递给子组件，并且用Formik自带的formik.handleChange，不需要自定义。

2. 优化点：跨步骤保留表单数据 #

现在你每个步骤的Formik都是独立初始化的，切换回上一步时会丢失之前填写的数据。建议把所有步骤的表单数据存在父组件Form的state里，让Formik从state读取初始值，提交时更新state。

第一步：在Form组件的state中添加表单数据存储

state = {
  step: 1,
  // 存储所有步骤的表单数据
  formData: {
    step1: {
      firstName: '',
      lastName: '',
      gender: '',
      DOB: '',
      tax_code: '',
      zip: '',
      district: [{ nome: null, sigla: null, regione: null }],
      country: '',
      city_birth: ''
    },
    step2: {
      isItalianCitizen: true,
      isAddressFiscal: false
    },
    step3: {
      example: "example"
    },
    step4: {
      example: "example"
    }
  }
};

第二步：修改每个步骤的Formik配置

以步骤1为例：

<Formik
  // 从state读取当前步骤的初始值
  initialValues={this.state.formData.step1}
  onSubmit={(values) => {
    // 提交时更新对应步骤的表单数据到state
    this.setState(prevState => ({
      formData: {
        ...prevState.formData,
        step1: values
      }
    }), () => {
      // 更新完成后再切换步骤
      this.nextStep();
    });
  }}
  validationSchema={validationSchemaRegistration}
>
  {(formik) => (
    <LeadRegistration
      nextStep={this.nextStep}
      prevStep={this.prevStep}
      formik={formik}
      onSubmit={formik.handleSubmit}
    />
  )}
</Formik>

步骤2的修复示例：

<Formik
  initialValues={this.state.formData.step2}
  onSubmit={(values) => {
    this.setState(prevState => ({
      formData: {
        ...prevState.formData,
        step2: values
      }
    }), () => {
      this.nextStep();
    });
  }}
  // 没有校验规则可以传undefined，或者直接去掉这个属性
  validationSchema={undefined}
>
  {(formik) => (
    <LeadPersonalDetails
      nextStep={this.nextStep}
      prevStep={this.prevStep}
      formik={formik}
      onSubmit={formik.handleSubmit}
    />
  )}
</Formik>

步骤3、4的修复示例（以步骤3为例）：

<Formik
  initialValues={this.state.formData.step3}
  onSubmit={(values) => {
    this.setState(prevState => ({
      formData: {
        ...prevState.formData,
        step3: values
      }
    }), () => {
      this.nextStep();
    });
  }}
>
  {(formik) => (
    <LeadPersonalContacts
      nextStep={this.nextStep}
      prevStep={this.prevStep}
      formik={formik}
      onSubmit={formik.handleSubmit}
    />
  )}
</Formik>

3. 子组件中使用Formik props #

修改完父组件后，子组件就能通过props.formik拿到所有Formik的方法和状态了，比如：

// 子组件示例：LeadRegistration
const LeadRegistration = ({ formik, nextStep, prevStep }) => {
  return (
    <form onSubmit={formik.handleSubmit}>
      <input
        name="firstName"
        value={formik.values.firstName}
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
      />
      {/* 其他表单字段 */}
      <button type="submit">下一步</button>
      <button type="button" onClick={prevStep}>上一步</button>
    </form>
  );
};

三、总结 #

• 你的分步表单设计思路是合理的，分步隔离Formik的方式适合多步骤、每步独立校验的场景；
• 切换步骤时拿不到Formik props的核心原因是部分步骤未传递formik参数，加上跨步骤数据未持久化；
• 按照上面的修改，不仅能解决props传递问题，还能实现回退步骤时保留已填数据的功能。

备注：内容来源于stack exchange，提问作者spirito8666