Next.js遍历对象生成下拉选项时如何去重并保留对应ID值

你之前用Set直接存储CityName字符串做去重的写法，只能拿到去重后的城市名称文本，会丢失和名称绑定的CityId属性，无法满足option值绑定需求，下面是两种可直接落地的实现方式：

方案1：基于Map按唯一键去重（推荐） #

同一个城市的CityId和CityName是一一绑定的，我们可以用CityId作为去重唯一键，借助Map键唯一的特性自动过滤重复项，最终输出的是完整的城市对象，可同时取到ID和名称字段。

{/* 城市下拉框 */}
<select>
  {Array.from(
    new Map(items.map(item => [item.CityId, item])).values()
  ).map(city => (
    <option key={city.CityId} value={city.CityId}>
      {city.CityName}
    </option>
  ))}
</select>

代码逻辑说明：

• 遍历原始数组时，把每个项以[CityId, 完整item对象]的键值对存入Map
• 相同CityId的重复项会被后续条目自动覆盖，最终Map里存的就是所有不重复的城市
• 调用values()拿到所有不重复的城市对象转成数组，直接遍历渲染即可

方案2：基于Set标记已渲染值过滤 #

如果遇到字段映射关系更复杂的场景，也可以用Set存储已经出现过的唯一ID，遍历原始数组时过滤掉已经存在ID的重复项：

<select>
  {
    (() => {
      const addedCityIds = new Set();
      return items.filter(item => {
        if (addedCityIds.has(item.CityId)) return false;
        addedCityIds.add(item.CityId);
        return true;
      }).map(city => (
        <option key={city.CityId} value={city.CityId}>
          {city.CityName}
        </option>
      ))
    })()
  }
</select>

出发日期下拉框适配 #

出发日期的去重逻辑和城市完全一致，只需要把去重的唯一键换成和日期一一对应的DepartureId即可：

{/* 出发日期下拉框 */}
<select>
  {Array.from(
    new Map(items.map(item => [item.DepartureId, item])).values()
  ).map(departure => (
    <option key={departure.DepartureId} value={departure.DepartureId}>
      {departure.DeptDate.trim()}
    </option>
  ))}
</select>

注意：示例数据中DeptDate字段末尾带有多余空格，渲染时调用trim()可以避免显示异常。

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