Redux Form提交时组件卸载报错，如何避免组件重挂载？

Hey there! Let’s dig into fixing that annoying remount issue with Redux Form that’s causing the "Can only update a mounted or mounting component" error. The root of this problem usually lies in how Redux Form interacts with your component’s identity or props—here’s how to tackle it step by step:

• Stabilize your form name prop
  Redux Form treats each unique form prop value as a separate form instance. If you’re generating the form name dynamically (like using a user ID from props that changes), it’ll trigger an unmount/remount every time that value updates. Stick to a static string instead:

  // ❌ Bad: Dynamic form name causes remounts
  reduxForm({ form: `user-form-${props.userId}` })(YourForm)
  
  // ✅ Good: Static, consistent form name
  reduxForm({ form: 'user-profile-update-form' })(YourForm)
  

• Avoid inline component definitions
  If you define custom field components (or any child components) inside your form’s render method, React sees them as brand-new component types on every render—forcing an unmount of the old version. Move these components outside the render scope or memoize them:

  // ❌ Bad: Inline component triggers remounts
  const YourForm = () => {
    const CustomNameInput = ({ input }) => <input {...input} placeholder="First name" />;
    return <Field name="firstName" component={CustomNameInput} />;
  };
  
  // ✅ Good: Component defined outside render
  const CustomNameInput = ({ input }) => <input {...input} placeholder="First name" />;
  const YourForm = () => {
    return <Field name="firstName" component={CustomNameInput} />;
  };
  

• Memoize your form component with React.memo
  Wrap your form component in React.memo to tell React to skip re-renders (and potential remounts) unless the component’s props actually change. This is especially helpful if parent components are passing down unnecessary prop updates:

  import React from 'react';
  import { reduxForm, Field } from 'redux-form';
  
  const YourForm = ({ handleSubmit, error }) => {
    // Form UI with error display logic here
  };
  
  // Memoize to prevent unnecessary re-renders
  const MemoizedForm = React.memo(YourForm);
  
  export default reduxForm({ form: 'user-profile-update-form' })(MemoizedForm);
  

• Check your HOC composition
  If you’re combining Redux Form with connect (from React Redux), make sure your mapStateToProps function isn’t returning new objects/arrays on every render (this triggers unnecessary re-renders that can lead to remounts). Use memoization tools like Reselect or useMemo to stabilize the values returned from mapStateToProps.

• Disable automatic form state destruction (if safe)
  By default, Redux Form destroys form state when the component unmounts. If you don’t need this behavior, set destroyOnUnmount: false in your form config. This won’t stop the remount, but it will preserve form state and reduce the impact of the issue if remounting is unavoidable:

  reduxForm({
    form: 'user-profile-update-form',
    destroyOnUnmount: false
  })(YourForm)
  

One last check: Are you conditionally rendering the form (like {isEditing && <YourForm />})? Toggling the form’s presence in the DOM will always cause unmounts. If possible, keep the component mounted and toggle visibility with CSS (display: none) instead.

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