基于refine.dev与Ant Design实现多对多关联的多选选择器

云上老周

2026-8-8

解决方案

针对多对多关联的表单适配问题，无需修改后端，直接通过Ant Design Form的两个核心属性即可解决格式转换问题：

核心思路

Ant Design Select多选模式返回的是ID数组，但API要求的是包含id的对象数组；同时回显时API返回的是对象数组，需要转成ID数组给Select识别。通过getValueProps和normalize属性分别处理回显格式转换和提交格式转换。

代码实现

import { Form, Select } from 'antd';
import { useSelect } from '@refinedev/antd';

// 保持原useSelect配置不变
const { selectProps: relationsSelectProps } = useSelect<Relation>({
  resource: 'relations',
  optionLabel: 'name',
});

// 表单组件部分
<Form.Item
  name="relations"
  // 处理回显：将API返回的对象数组转成ID数组给Select
  getValueProps={(value) => ({
    value: value?.map(item => item.id) || [],
  })}
  // 处理提交：将Select选中的ID数组转成API需要的对象数组
  normalize={(value) => (
    value?.map(id => ({ id })) || []
  )}
>
  <Select
    mode="multiple"
    placeholder="选择关联关系"
    {...relationsSelectProps}
  />
</Form.Item>

关键属性说明

getValueProps：接收表单字段的原始值（即API返回的[{id:1}, {id:2}]），返回组件需要的props，这里把值转成[1,2]，让Select能正确匹配选项并回显。
normalize：接收组件输出的值（即Select选中的[1,2]），返回最终要提交给API的格式，这里转成[{id:1}, {id:2}]，完全匹配后端要求的结构。