求助：redux-form输入字符后FieldArray重复注册字段问题

Hey there! I’ve dealt with this exact headache in redux-form v7.3.0 before—totally feel your pain when the form keeps re-registering fields on every keystroke, making it almost impossible to use. Since you mentioned this ties to input validation, let’s break down why it happens and how to fix it:

The core issue here is that redux-form triggers a field re-registration whenever the validation logic’s reference changes. This usually happens when you create new validation functions/arrays inside your component’s render cycle—meaning a fresh reference is generated every time the component re-renders (like on every keystroke).

Here are the most reliable fixes:

• Memoize your top-level validation function
  If you’re using a single validate function for the entire form, ensure it’s not recreated on every render. Define it outside your component (so it’s created once) or use memoization hooks if it depends on component props. Example:

  // Define this outside your component for a stable reference
  const validateForm = values => {
    const errors = {};
    if (!values.username) errors.username = 'Username is required';
    if (!values.password) errors.password = 'Password is required';
    return errors;
  };
  
  function MyForm() {
    return (
      <Form
        form="myForm"
        validate={validateForm}
        onSubmit={handleSubmit}
      >
        {/* Your form fields go here */}
      </Form>
    );
  }
  

• Avoid inline validation arrays on Field components
  If you’re passing validation rules directly to individual Field components like this (which creates a new array every render):

  <Field
    name="email"
    component="input"
    validate={[required, validateEmail]}
  />
  

  Move the validation array outside the component to keep its reference stable:

  // Outside your component
  const emailValidators = [required, validateEmail];
  
  // Inside your component
  <Field
    name="email"
    component="input"
    validate={emailValidators}
  />
  

• Stabilize props passed to the Form component
  Any props you pass to the redux-form Form wrapper (like onSubmit, validate, or initialValues) should have stable references. For example, wrap your onSubmit function with useCallback if it relies on component props:

  const handleSubmit = useCallback((values) => {
    // Your submit logic here
  }, [apiClient]); // Add dependencies that should trigger a re-run of the function
  

I’ve used these fixes multiple times to resolve this exact issue in v7.3.0. If you can upgrade to a newer version of redux-form, that might also help (later versions addressed some reference stability bugs)—but if you’re stuck on v7.3.0, these steps should get your form working smoothly again.

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