ReactJS：数组去重函数为何导致下拉列表功能异常？

嘿，我来帮你搞定这个问题！听起来你在给三个下拉菜单做数据填充时，给客户和细分领域加了去重逻辑，结果反而把原本正常的建筑场地下拉框搞成只显示一项了——这种不小心“误伤”的情况我也碰到过，咱们一步步排查解决：

最可能的几个原因 #

• 误给建筑场地应用了去重逻辑：比如你写了一个通用去重函数，结果顺手把建筑场地的数据也丢进去处理了，但判断重复的字段用错了（比如用了客户ID而非建筑场地名称/ID），导致所有建筑场地都被判定为重复项，只留下第一个。
• 去重函数逻辑有问题：比如你的去重函数没有指定唯一标识字段，默认用了整个对象比较，而建筑场地的对象可能因为关联的客户/细分领域属性不同，被误判为重复，最终只保留了一项。
• 原始数据被意外修改：处理客户和细分领域数据时，不小心直接修改了原始的JSON数组，导致建筑场地的数据被篡改。

修复步骤 & 示例代码 #

1. 先写一个精准的通用去重函数 #

针对不同下拉框的不同唯一字段，咱们写一个可以指定字段的去重函数，避免一刀切：

// 按指定字段给数组去重的通用函数
const getUniqueItems = (array, uniqueField) => {
  const seenValues = new Set();
  return array.filter(item => {
    const fieldValue = item[uniqueField];
    if (!seenValues.has(fieldValue)) {
      seenValues.add(fieldValue);
      return true;
    }
    return false;
  });
};

2. 分别处理三个下拉框的数据 #

确保每个下拉框的数据处理逻辑独立，建筑场地如果不需要去重就直接用原始数据，需要去重的话也用它自己的唯一字段：

// 假设你从JSON获取的原始数据是rawData数组
// 处理客户下拉框：按客户名称（或客户ID）去重
const uniqueClients = getUniqueItems(rawData, 'clientName'); 
// 处理细分领域下拉框：按细分领域名称（或ID）去重
const uniqueSegments = getUniqueItems(rawData, 'segmentName'); 
// 处理建筑场地下拉框：不需要去重就直接提取，需要去重则用siteName/siteId
const siteOptions = rawData.map(item => item.siteName); 
// 如果建筑场地也需要去重，就用：
// const uniqueSites = getUniqueItems(rawData, 'siteName');

3. 渲染下拉框时注意key的唯一性 #

React渲染列表时key要唯一，避免渲染异常：

// 客户下拉框
<select>
  {uniqueClients.map(client => (
    <option key={client.clientId || client.clientName} value={client.clientId}>
      {client.clientName}
    </option>
  ))}
</select>

// 建筑场地下拉框
<select>
  {siteOptions.map((site, idx) => (
    // 如果siteName有重复，最好用原始数据里的siteId当key；没有的话用idx兜底
    <option key={rawData[idx].siteId || idx} value={site}>
      {site}
    </option>
  ))}
</select>

// 细分领域下拉框
<select>
  {uniqueSegments.map(segment => (
    <option key={segment.segmentId || segment.segmentName} value={segment.segmentId}>
      {segment.segmentName}
    </option>
  ))}
</select>

快速排查小技巧 #

• 先在控制台打印处理后的建筑场地数据（console.log(siteOptions)），看看是不是已经只剩一项了——如果是，那就是数据处理环节出了问题。
• 检查你的去重函数是不是被不小心用到了建筑场地的数据上，或者去重时传错了字段（比如把siteName写成了clientId）。

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