如何将 `destroyOnUnmount: false` 和 `forceUnregisterOnUnmount: false` 与 `enableReinitialize: true` 一起使用

Question

我有一个用于创建和更新表单的向导表单。我正在使用 redux-form/immutable。

当我从向导表单的 tab1 导航到 tab2 时，我正在丢失表单 tab1 中的状态（用户输入）

我试过使用 destroyOnUnmount: false 和 forceUnregisterOnUnmount: false 没有 enableReinitialize: true 它适用于更新屏幕，但对于创建屏幕我无法使用从 API 获取的现有值初始化表单。

FUNCTIONAL FORM COMPONENT

const AlphaForm = () => {

  return (
    <Panel theme="light">
      <PanelHeader>FORM</Panel.Header>
      <PanelBody>
        <Field
          component={Check}
          label="abc"
          name="abc"
          type="checkbox"
        />
        .....................................
      </PanelBody>
    </Panel>
  );
};

Wrapper

let AlphaFormWrapper = reduxForm({
  destroyOnUnmount: false,
  forceUnregisterOnUnmount: false,
  enableReinitialize: true,
  form: 'alphaForm'
})(AlphaForm);

Connect

const AlphaConnect = connect(
  state => {
    return {
      initialValues: state.getIn(['alphaForm'])
    };
  },
)(AlphaFormWrapper);

Answer 1

使用 enableReinitialize: true 和 keepDirtyOnReinitialize: true 为我解决了上述问题

如何将 `destroyOnUnmount: false` 和 `forceUnregisterOnUnmount: false` 与 `enableReinitialize: true` 一起使用

How to use `destroyOnUnmount: false` and `forceUnregisterOnUnmount: false` with `enableReinitialize: true`

javascript

reactjs

react-redux

redux-form