React SPFx Combobox如何映射仅包含唯一值的选项？

要让ComboBox只展示唯一的地点选项，核心是先对rooms数组做去重处理，再生成选项集合。以下是两种实用方案：

方案一：利用Map快速去重（性能更优） #

通过Map的键唯一性特性，自动过滤重复的location，同时保留每个地点对应的一条room数据：

// 生成仅包含唯一location的数组（保留每个location最后一次出现的room项）
const uniqueLocations = Array.from(new Map(rooms.map(room => [room.location, room])).values());

// 渲染ComboBox
<ComboBox 
  label='City' 
  options={uniqueLocations.map((roomInfo): IComboBoxOption => ({
    key: roomInfo.id, 
    text: roomInfo.location 
  }))}
/>

如果需要保留每个location第一次出现的room项，可以反转数组后再处理：

const uniqueLocations = Array.from(new Map([...rooms].reverse().map(room => [room.location, room])).values()).reverse();

方案二：使用filter过滤重复项（逻辑直观） #

通过findIndex判断当前项是否是该location第一次出现，过滤掉后续重复项：

// 过滤出仅包含唯一location的数组
const uniqueLocations = rooms.filter((room, index, self) => 
  self.findIndex(r => r.location === room.location) === index
);

// 渲染ComboBox
<ComboBox 
  label='City' 
  options={uniqueLocations.map((roomInfo): IComboBoxOption => ({
    key: roomInfo.id, 
    text: roomInfo.location 
  }))}
/>

额外处理：忽略大小写去重 #

如果需要不区分地点名称的大小写（比如"New York"和"new york"视为同一地点），可以将location转为统一大小写作为判断依据：

// Map方式示例
const uniqueLocations = Array.from(new Map(rooms.map(room => [room.location.toLowerCase(), room])).values());

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