如何重置拆分为不同部分的 react redux 表单（向导表单）？

Question

I cannot manage to reset my react redux form that is split in 3 different forms/pages. It's a wizard form and I have been trying many ways to reset it unsuccessfully.

I've been using these 2 resources: How to build a wizard form: https://redux-form.com/8.3.0/examples/wizard/ How to reset a form: https://redux-form.com/6.0.0-alpha.4/docs/faq/howtoclear.md/

However, it seems clear to me now that it kinda impossible to do so.

I have 3 pages like so: WizardForm.jsx

<div className="wizard__form-wrapper">
  {page === 1
  && (
    <WizardFormOne
      onSubmit={this.nextPage}
      initialValues={initialValues}
    />
  )}
  {page === 2
  && (
    <WizardFormTwo
      previousPage={this.previousPage}
      onSubmit={this.nextPage}
    />
  )}
  {page === 3
  && (
    <WizardFormThree
      previousPage={this.previousPage}
      onSubmit={values => onSubmit(values)}
    />
  )}
</div>

and on each form I'm exporting my form like so: WizardFormOne.jsx

export default reduxForm({
  form: 'wizard', //                 <------ same form name
  destroyOnUnmount: false, //        <------ preserve form data
  forceUnregisterOnUnmount: true, // <------ unregister fields on unmount
  validate,
})(WizardFormOne);

The form works great but I cannot reset it. I've been trying all 4 options described in the link above. FOr example, in my WizardForm.jsx I do:

componentWillUnmount() {
    const { dispatch } = this.props;
    dispatch(reset('wizard'));
  }

But nothing happens, and my form is not cleared.

Any help is much appreciated. Thank you.

Answer 1

For what its worth I found a solution to this issue:

You can pass a prop such as resetForm to the child component that contains the form, in m case it's WizardFormOne.jsx and do something like this:

constructor(props) {
    super(props);
    if (props.resetForm && props.isPristine) {
      props.destroy();
    }
  }

I'm sure you can put it in componentDidMount I'll have to keep working on it. That did it in my case.