AntD动态表单中Select组件过滤选项后显示ID而非名称的问题求助

在React（v18.3.1）项目中使用Ant Design（v5.19.4）开发动态表单，表单内的Select组件基于包含id和name属性的字段数组渲染选项。原本功能正常，但添加过滤逻辑排除已选字段后，从过滤列表中选择选项时，Select组件显示的是字段的id（值）而非name（标签）。

问题原因 #

核心原因是过滤后的选项列表中不包含当前选中的字段，Antd的Select组件无法从现有options中找到与选中值匹配的label，因此会直接显示value（即字段id）。

解决方案 #

方案1：保留已选字段在选项列表中（推荐） #

调整过滤逻辑，保留已选字段在选项列表内，可选择将其禁用避免重复选择，这样Select能始终找到对应的标签。

// 调整过滤逻辑：保留当前选中的字段，排除其他已选项（单选场景）
const filteredFields = fields.filter(field => {
  const currentSelectedId = form.getFieldValue('fieldId');
  return field.id === currentSelectedId || !selectedFields.some(s => s.id === field.id);
});

// 渲染Select选项
<Select
  value={form.getFieldValue('fieldId')}
  onChange={(value) => form.setFieldValue('fieldId', value)}
>
  {filteredFields.map(field => (
    <Option 
      key={field.id} 
      value={field.id}
      disabled={selectedFields.some(s => s.id === field.id)} // 禁用已选字段
    >
      {field.name}
    </Option>
  ))}
</Select>

方案2：手动维护字段映射表 #

创建所有字段的id-name映射表，通过Select的format属性手动转换显示文本，即使选项被过滤也能正确显示名称。

import { useMemo } from 'react';

// 生成字段映射表，依赖fields更新
const fieldMap = useMemo(() => {
  return new Map(fields.map(field => [field.id, field.name]));
}, [fields]);

// 使用format属性转换显示文本
<Select
  value={form.getFieldValue('fieldId')}
  onChange={(value) => form.setFieldValue('fieldId', value)}
  format={(value) => fieldMap.get(value) || value} // 找不到时显示原value
>
  {filteredFields.map(field => (
    <Option key={field.id} value={field.id}>
      {field.name}
    </Option>
  ))}
</Select>

方案3：存储完整字段对象作为表单值 #

开启Select的labelInValue属性，让表单值存储包含key（id）和label（name）的对象，即使选项被过滤，也能直接从值中获取显示文本。

// 初始化表单值（可选）
useEffect(() => {
  form.setFieldValue('selectedField', null);
}, [form]);

// 配置Select组件
<Select
  value={form.getFieldValue('selectedField')?.key}
  onChange={(value) => form.setFieldValue('selectedField', value)}
  labelInValue // 开启后，value为{key: id, label: name}格式
>
  {filteredFields.map(field => (
    <Option key={field.id} value={field.id}>
      {field.name}
    </Option>
  ))}
</Select>

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