React框架下使用JavaScript map实现数组去重 解决下拉框重复值问题

你的原有处理逻辑本身是成立的，未生效通常是以下几个常见原因：

• 处理逻辑执行时原始array还未完成赋值：要确保在数据库接口返回数据、state更新完成后再执行去重操作，不要在初始空数据阶段提前处理
• city字段存在格式差异：首尾空格、中英文大小写、全半角符号的区别都会导致去重失效，比如" 广州"和"广州"、"chengdu"和"Chengdu"会被判定为不同值
• 去重后的数据未更新到React state：必须通过useState的更新方法/类组件的setState触发重渲染，下拉框才能拿到最新的处理后数据

更简洁高效的去重实现 #

推荐使用Set实现去重，比你当前用indexOf的写法时间复杂度更低，数据量大的时候性能优势更明显：

// 仅提取去重后的城市名称列表
const uniqueCities = [...new Set(
  array.map(item => (item.city || '').trim())
    .filter(Boolean) // 过滤空值
)]

// 如果需要保留完整的原始对象，可使用以下写法
const uniqueCityItems = array.filter((item, index, self) => 
  self.findIndex(entry => (entry.city || '').trim() === (item.city || '').trim()) === index
)

下拉框渲染示例 #

// 函数组件中使用示例
return (
  <select>
    {uniqueCities.map((city, idx) => (
      <option key={idx} value={city}>{city}</option>
    ))}
  </select>
)

如果调试后还是不生效，可以直接打印原始array和处理后的uniqueCities，确认字段格式是否符合预期。

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