ReactJS中无法移除下拉列表重复项 求技术协助

核心问题在于直接对对象引用使用Set无法去重——因为每个对象都是独立的引用，Set会将它们视为不同的值。正确的做法是先提取原始类型的device_id值（字符串/数字），再进行去重，最后生成下拉选项。

方法1：Set + map 高效去重 #

先提取所有device_id，通过Set去重后转回数组，再生成选项：

// 从devices数组提取并去重device_id
const uniqueDeviceIds = [...new Set(devices.map(device => device.device_id))];

// 生成下拉选项（以React为例）
const dropdownOptions = uniqueDeviceIds.map(id => (
  <option key={id} value={id}>
    {id}
  </option>
));

方法2：reduce 手动去重（适合复杂场景） #

如果需要额外逻辑判断，用reduce收集不重复的id：

const uniqueDeviceIds = devices.reduce((acc, device) => {
  if (!acc.includes(device.device_id)) {
    acc.push(device.device_id);
  }
  return acc;
}, []);

最终使用示例 #

将生成的选项插入下拉组件：

<select>
  {dropdownOptions}
</select>

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