如何在卸载Redux Form后保留状态及切换Schema时维持表单状态？

嘿，刚好我之前在项目里踩过类似的Redux Form坑，给你分享两个亲测有效的解决方案：

一、卸载Redux Form后保留状态 #

Redux Form默认会在组件卸载时自动清除对应formName的状态，要改变这个行为很简单，只需要在reduxForm()的配置里加上destroyOnUnmount: false：

import { reduxForm } from 'redux-form';

const YourFormComponent = (props) => {
  // 你的表单渲染逻辑
};

export default reduxForm({
  form: 'yourFormName',
  destroyOnUnmount: false, // 核心配置：卸载组件时不清除表单状态
})(YourFormComponent);

如果之后需要手动清除这个表单的状态（比如用户提交成功后），可以直接调用Redux Form提供的destroy action：

// 在表单组件内部
const handleSubmit = (values) => {
  // 处理提交逻辑...
  props.destroy(); // 手动清除表单状态
};

要是你需要更持久化的状态（比如页面刷新后也保留），可以结合Redux的中间件或者自定义reducer：监听Redux Form的DESTROY action，在清除前把状态存到localStorage；然后在表单初始化时，从localStorage读取并设置initialValues。

二、修改Schema时保留相同formName的表单状态 #

这个问题的核心是Schema变化导致组件不必要重渲染，进而触发Redux Form的状态重置，可以从两个维度解决：

1. 缓存Schema，避免不必要的组件重渲染 #

如果你的Schema是每次渲染都生成的新对象/数组，React会认为props变化了，导致表单组件重新渲染。用useMemo（函数组件）或者shouldComponentUpdate（类组件）缓存Schema，确保只有当Schema的实际内容变化时才更新：

import React, { useMemo } from 'react';
import { reduxForm, Field } from 'redux-form';

const DynamicForm = ({ schema, ...props }) => {
  // 用useMemo缓存schema，只有当schema的实际内容变化时才重新生成
  const memoizedSchema = useMemo(() => [...schema], [JSON.stringify(schema)]);

  return (
    <form onSubmit={props.handleSubmit}>
      {memoizedSchema.map(field => (
        <Field 
          key={field.name} 
          name={field.name} 
          component={field.component} 
          label={field.label}
        />
      ))}
    </form>
  );
};

// 用React.memo包裹组件，浅比较props避免无意义重渲染
const MemoizedDynamicForm = React.memo(DynamicForm);

export default reduxForm({
  form: 'sharedFormName',
  enableReinitialize: false, // 关键：禁止Schema变化时重新初始化表单
})(MemoizedDynamicForm);

2. 分离表单结构与状态初始化 #

确保Redux Form的enableReinitialize保持默认的false（这个配置控制是否在initialValues变化时重新初始化表单）。这样即使Schema变化，只要你没有修改initialValues，表单的当前输入状态就会被保留——因为Redux Form只关心字段的name对应的值，和渲染的组件/结构无关。

如果确实需要在Schema变化时更新某些初始值，可以手动控制initialValues的更新时机，比如只在第一次挂载时设置，之后Schema变化不修改initialValues。

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