react-admin中SelectInput如何过滤choices重复值仅展示唯一选项

首先明确：你尝试在optionText对应的渲染组件里返回null的方案不可行，该方式仅能隐藏选项文本，无法移除整个选项节点，最终会出现多条空白选项，达不到去重效果。

最优方案是提前对传入SelectInput的choices数据源做去重预处理，具体实现如下： #

方案1：保留单个同名称项的ID（适用于选择后匹配单条记录的场景） #

如果你选择car1后仅需要对应任意一个同名称的ID即可，可以通过Map对原始数据按名称去重，保留每个名称的第一条记录：

// 原始数据源
const rawData = [{name: "car1",id: 1,}, {name: "car1",id: 2,}, {name: "car2",id: 3,}];
// 按name去重处理
const uniqueChoices = Array.from(
  new Map(rawData.map(item => [item.name, item])).values()
);

将处理后的uniqueChoices传入SelectInput的choices属性即可：

<SelectInput 
  choices={uniqueChoices}
  optionText={<Choice/>}
/>

const Choice = ({record}) => {
  return(
    <span>{record?.name}</span>
  )
}

方案2：以名称作为选择值（适用于选择后匹配所有同名称记录的场景） #

如果你选择car1后需要筛选所有名称为car1的记录，可以将name作为选项值，直接提取所有不重复的名称作为选项：

const rawData = [{name: "car1",id: 1,}, {name: "car1",id: 2,}, {name: "car2",id: 3,}];
const uniqueChoices = [...new Set(rawData.map(item => item.name))].map(name => ({
  id: name,
  name
}));

传入组件时指定optionValue为name即可：

<SelectInput 
  choices={uniqueChoices}
  optionText="name"
  optionValue="name"
/>

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