如何追踪Ant Design动态表单项并将所有字段值存入状态对象数组

核心方案直接基于Ant Design Form自带的Form.List能力实现，不需要额外手写冗余的值同步逻辑，表单收集到的内容天然对齐你需要的对象数组格式。

具体实现步骤 #

• 初始化表单实例，直接按目标数据结构设置初始值
  静态字段可以直接作为动态数组的第一个初始元素存入，不需要单独拆分存储：

  import { Form, Button, Space, InputNumber, Autocomplete } from 'antd';
  import { PlusOutlined, MinusCircleOutlined } from '@ant-design/icons';
  
  const CommissionForm = () => {
    const [form] = Form.useForm();
    // 初始值完全匹配你需要的数组结构
    const initFormValues = {
      commissionGroup: [
        // 静态字段放在数组首位即可
        { commisionFor: 'Invoicing', perctange: 10 }
      ]
    };
  

• 用Form.List渲染动态表单项，字段名直接和对象属性一一绑定
  每个动态组内的输入组件直接绑定对应对象的属性名，不需要额外嵌套字段层级，新增项时直接推入空对象即可：

  return (
      <Form form={form} initialValues={initFormValues}>
        <Form.List name="commissionGroup">
          {(fields, { add, remove }) => (
            <>
              {fields.map(({ key, name, ...restField }) => (
                <Space key={key} align="baseline" style={{ marginBottom: 16 }}>
                  {/* 绑定对象的commisionFor属性 */}
                  <Form.Item
                    {...restField}
                    name={[name, 'commisionFor']}
                    rules={[{ required: true, message: '请填写适用场景' }]}
                  >
                    <Autocomplete placeholder="适用场景" options={[]} style={{ width: 200 }} />
                  </Form.Item>
                  {/* 绑定对象的perctange属性 */}
                  <Form.Item
                    {...restField}
                    name={[name, 'perctange']}
                    rules={[{ required: true, message: '请填写占比' }]}
                  >
                    <InputNumber placeholder="占比(%)" min={0} max={100} />
                  </Form.Item>
                  <MinusCircleOutlined onClick={() => remove(name)} />
                </Space>
              ))}
              <Form.Item>
                <Button 
                  type="dashed" 
                  onClick={() => add({})} 
                  block 
                  icon={<PlusOutlined />}
                  style={{ width: 360 }}
                >
                  新增条件组
                </Button>
              </Form.Item>
            </>
          )}
        </Form.List>
      </Form>
    )
  

• 取值/同步到组件State
  不需要手动给每个输入框绑定onChange拼接数据，直接调用表单实例方法或者用监听钩子就能拿到格式完全符合要求的对象数组：

  // 方式1：提交时直接取值
    const onSubmit = () => {
      // 拿到的值就是你需要的结构：[{commisionFor: 'xxx', perctange: xx}, ...]
      const targetArray = form.getFieldsValue().commissionGroup;
      console.log(targetArray);
      // 这里直接把targetArray存到state或者发请求就行
    }
  
    // 方式2：实时同步到组件state
    const commissionArray = Form.useWatch('commissionGroup', form);
    // 直接用commissionArray即可，值会随用户输入实时更新
  

特殊场景处理 #

如果你的静态字段没有放在动态列表里，是单独渲染的表单项，只要在最终取值的时候做一次简单拼接就行，不需要改动表单结构：

const allValues = form.getFieldsValue();
const finalArray = [
  // 单独的静态字段拼到对应位置
  { commisionFor: '默认场景', perctange: allValues.defaultPercent },
  ...allValues.commissionGroup
]

不推荐手动维护state拼接数组的方案：Ant Design Form内部已经做了值托管、校验联动的逻辑，额外手写onChange同步值很容易出现数据不一致、校验状态不更新的问题，用原生的字段绑定能力代码量更少，稳定性更高。

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