如何使用redux-form添加和移除表单字段？

我完全理解你的困扰——用JSON Schema生成的表单依赖点标记命名自动构建嵌套对象，结果redux-form的FieldArray一push就把结构改成数组，完全打乱了原本的数据格式。我之前做类似项目的时候也碰到过这个问题，分享几个实用的解决方案：

1. 绕开FieldArray，手动管理动态嵌套字段 #

FieldArray本质是为数组结构设计的，咱们没必要硬套。可以自己维护要渲染的字段数量，用redux-form的Field组件结合点标记命名来实现动态添加：

• 在表单组件里用state（或者redux状态）存一个计数器，比如childFieldCount，初始值设为1
• 渲染时根据计数器循环生成字段，命名规则用ParentField.ChildField${index+1}.Name这种带序号的格式
• 点击"添加"按钮时，只需要递增计数器，就会自动渲染出新的字段
• 提交后如果需要把这些带序号的子字段转成数组，简单处理一下就行

举个实际代码例子：

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

const DynamicNestedForm = ({ handleSubmit, childFieldCount, incrementCount }) => (
  <form onSubmit={handleSubmit}>
    {/* 根据计数器渲染对应数量的字段 */}
    {[...Array(childFieldCount)].map((_, index) => (
      <div className="child-field-group" key={index}>
        <Field 
          name={`ParentField.ChildField${index + 1}.Name`}
          component="input"
          placeholder={`子字段 ${index + 1} 名称`}
        />
      </div>
    ))}
    <button type="button" onClick={incrementCount}>添加新的子字段</button>
    <button type="submit">提交表单</button>
  </form>
);

// 从redux获取计数器状态（或者直接存在组件state里更简单）
const mapStateToProps = state => ({
  childFieldCount: state.form.myForm.childFieldCount || 1
});

// 递增计数器的action
const mapDispatchToProps = dispatch => ({
  incrementCount: () => dispatch({ type: 'INCREMENT_CHILD_FIELD_COUNT' })
});

export default reduxForm({ form: 'myForm' })(
  connect(mapStateToProps, mapDispatchToProps)(DynamicNestedForm)
);

提交后的数据会是这样的嵌套对象：

{
  "ParentField": {
    "ChildField1": { "Name": "测试值1" },
    "ChildField2": { "Name": "测试值2" }
  }
}

如果业务需要把这些子字段转成数组，在提交函数里处理：

const onSubmit = values => {
  const { ParentField, ...rest } = values;
  // 把带序号的子字段转成数组
  const childFieldsArray = Object.values(ParentField);
  // 组装成最终需要的数据格式
  const finalData = {
    ...rest,
    ParentField: childFieldsArray
  };
  // 这里调用你的提交接口
  api.submitForm(finalData);
};

2. 自定义FieldArray的push行为，适配嵌套对象 #

如果你实在想用FieldArray的API（比如依赖它的移除、排序功能），可以自定义它的push方法，让它不再往数组里加元素，而是往嵌套对象里新增带序号的属性：

import { FieldArray } from 'redux-form';

const NestedFieldArray = ({ name, component: CustomComponent, ...rest }) => {
  const WrappedComponent = ({ fields, ...props }) => {
    // 重写push方法
    const customPush = () => {
      const currentFieldCount = Object.keys(fields.get(name) || {}).length;
      const newFieldKey = `ChildField${currentFieldCount + 1}`;
      // 触发redux-form的CHANGE action，往嵌套对象里加新字段
      fields.dispatch({
        type: 'CHANGE',
        payload: {},
        meta: { 
          form: fields.meta.form, 
          field: `${name}.${newFieldKey}` 
        }
      });
    };

    // 替换原fields的push方法
    const modifiedFields = { ...fields, push: customPush };

    return <CustomComponent fields={modifiedFields} {...props} />;
  };

  return <FieldArray name={name} component={WrappedComponent} {...rest} />;
};

这个方法需要根据你的具体数据结构微调，但核心思路就是把FieldArray的数组操作转换成嵌套对象的属性操作。

3. 数据前后转换，在表单和业务逻辑间做适配 #

如果你的项目已经大量使用FieldArray，不想改组件逻辑，那可以在数据进入表单和离开表单时做格式转换：

• 初始化时：把业务端的嵌套对象转换成FieldArray需要的数组结构
• 提交时：把FieldArray生成的数组转换回嵌套对象格式

比如：

// 假设业务端给的初始数据是嵌套对象
const businessInitialData = {
  ParentField: {
    ChildField1: { Name: "初始值1" },
    ChildField2: { Name: "初始值2" }
  }
};

// 转换成FieldArray需要的数组结构
const formInitialValues = {
  ParentField: Object.values(businessInitialData.ParentField)
};

// 提交时再转换回去
const onSubmit = values => {
  const { ParentField, ...rest } = values;
  const nestedParentField = ParentField.reduce((acc, item, index) => {
    acc[`ChildField${index + 1}`] = item;
    return acc;
  }, {});
  const finalData = { ...rest, ParentField: nestedParentField };
  // 提交给业务接口
  api.submit(finalData);
};

总结 #

如果你的核心需求是保持嵌套对象的格式，方案一是最省心的，完全绕开FieldArray的数组限制；如果依赖FieldArray的其他功能，方案二或三可以适配。我当时用的是方案一，代码更直观，也不容易踩redux-form的坑。

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