javascript - 如何将 `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 为我解决了上述问题