如何使用对象数组初始化redux-form的FieldArray并显示初始值

Got it, let's tackle this issue with FieldArray and object-based initial values. I've run into this exact scenario before, so here's how to get your Field components to display the initial values correctly:

Core Issue #

When your FieldArray uses an array of objects (instead of simple primitives), the key is making sure your Field component's name prop maps exactly to the structure of your initial values, and that you're accessing the object properties correctly in your render function.

Step-by-Step Fix #

1. Ensure your initialValues structure is correct
   Your form's initialValues should be an array of objects matching the shape you expect. For example:

   const initialValues = {
     // Assuming your FieldArray is named "myFields"
     myFields: [
       { fieldName: "First Name", fieldDescription: "Enter your given name" },
       { fieldName: "Last Name", fieldDescription: "Enter your family name" }
     ]
   };
   

2. Adjust the Field name paths
   In your renderFields function, the name parameter from fields.map() represents the index path of the current element in the FieldArray (like "0", "1"). To target the object properties, you need to append the property name to this path.

   Your original code uses ${name}.${fieldName} which is incorrect—fieldName is the value from your object, not the property key. Instead, use the actual property keys from your initial values (e.g., fieldName and fieldDescription).

3. Fix the fields.get(index) usage
   fields.get(index) returns the full object from your FieldArray at that index, so you can destructure its properties directly.

Corrected Code Example #

Here's how your updated renderFields function and surrounding Formik setup should look:

import { Formik, Form, FieldArray, Field } from 'formik';

// Your getRenderer function (assuming it returns component/type based on command)
const getRenderer = (command, name) => {
  // Example implementation, adjust to your needs
  return { type: 'text', component: 'input' };
};

const renderFields = ({ fields }) => {
  return fields.map((name, index) => {
    // Get the full object from the FieldArray at this index
    const fieldObject = fields.get(index);
    const { type, component } = getRenderer(/* pass your command here */, name);

    return (
      <div key={name}>
        {/* Field for fieldName - name path maps to initialValues structure */}
        <Field
          name={`${name}.fieldName`}
          type={type}
          component={component}
          placeholder="Field Name"
        />
        {/* Field for fieldDescription - matches the nested property path */}
        <Field
          name={`${name}.fieldDescription`}
          type={type}
          component={component}
          placeholder="Field Description"
        />
        <button type="button" onClick={() => fields.remove(index)}>Remove</button>
      </div>
    );
  });
};

// Usage in your component
const MyForm = () => {
  const initialValues = {
    myFields: [
      { fieldName: "Initial Name 1", fieldDescription: "Initial Description 1" },
      { fieldName: "Initial Name 2", fieldDescription: "Initial Description 2" }
    ]
  };

  return (
    <Formik initialValues={initialValues} onSubmit={(values) => console.log(values)}>
      <Form>
        <FieldArray name="myFields" render={renderFields} />
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
};

export default MyForm;

Key Notes #

• Always double-check that your Field name props match the exact nested path in initialValues. Formik uses these paths to connect the field to the form state.
• fields.get(index) is the right way to access the current object in the FieldArray—avoid trying to parse the name parameter manually.
• If you're using custom components with Field, make sure they accept and use the value prop passed by Formik (most built-in components do this automatically).

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