Ant Design Form处理一对多关系实体编辑：如何让Tags返回对象数组？

我懂你的困扰——用name={["tags", "id"]}确实会把多选的ID一股脑塞进tags.id数组里，和你想要的对象数组格式完全对不上。咱们来一步步把这个问题理顺：

问题根源 #

你当前的写法["tags", "id"]是在告诉Form：把选中的值放到tags对象下的id字段里，所以提交后自然会得到tags: {id: [1,2]}的结构，而不是你需要的[{id:1}, {id:2}]对象数组。

解决方案一：用Form.List处理动态数组（推荐） #

如果你的标签需要用户动态添加/删除，Ant Design的Form.List专门用来处理这种数组型表单字段，完美匹配你的一对多场景：

import { Form, Select, Button } from 'antd';

// 在你的表单组件内部
<Form.List name="tags">
  {(fields, { add, remove }) => (
    <>
      {/* 渲染已有的标签项 */}
      {fields.map(({ key, name, ...restField }) => (
        <div key={key} style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
          <Form.Item
            {...restField}
            name={[name, 'id']}
            rules={[{ required: true, message: '请选择标签' }]}
          >
            <Select {...selectProps} />
          </Form.Item>
          <Button type="text" danger onClick={() => remove(name)}>删除</Button>
        </div>
      ))}
      {/* 添加新标签的按钮 */}
      <Button type="dashed" onClick={() => add()}>添加标签</Button>
    </>
  )}
</Form.List>

这样提交后，tags就会自动变成[{id:1}, {id:2}]的数组格式，完全符合你的需求。

解决方案二：用多选Select直接转换格式 #

如果你的标签是通过一个多选Select一次性选择多个，那可以直接在Select里处理值的转换：

import { Form, Select } from 'antd';

// 先获取form实例（用useForm hook）
const [form] = Form.useForm();

<Form.Item
  name="tags"
  // 把表单里的对象数组转成ID数组，让Select能正确显示选中状态
  getValueProps={(value) => ({
    value: value?.map(item => item.id) || []
  })}
  rules={[{ required: true, message: '请选择标签' }]}
>
  <Select
    mode="multiple"
    {...selectProps}
    // 把选中的ID数组转成对象数组，更新到表单里
    onChange={(selectedIds) => {
      const tagObjects = selectedIds.map(id => ({ id }));
      form.setFieldsValue({ tags: tagObjects });
    }}
  />
</Form.Item>

这种方式不需要额外的添加/删除按钮，适合一次性选择多个标签的场景。

方案三：提交时手动转换格式 #

如果你不想修改表单组件的写法，也可以在表单提交的最后一步手动转换数据格式：

const onFinish = (values) => {
  // 把tags.id的数组转换成你需要的对象数组
  const finalValues = {
    ...values,
    tags: values.tags.id.map(id => ({ id }))
  };
  // 这里用finalValues去提交即可
  console.log(finalValues);
};

这种方式最简单，但不够优雅，适合临时快速解决问题。

内容的提问来源于stack exchange，提问作者Чечельницкий Александр