React页面下拉列表读取JSON数据时如何避免客户名称重复

嘿，这个问题很常见，核心就是在渲染下拉列表前先对客户名称数据做去重处理就行啦！下面给你两种常用的方案，根据你的实际需求选就行：

方案1：只保留唯一的客户名称字符串（最简洁） #

如果你的下拉列表只需要显示客户名称，不需要关联其他数据，用Set来自动去重是最快的方式。Set会自动过滤掉重复的字符串，然后我们再把它转回数组就行。

修改你的数据获取逻辑，比如在componentDidMount里：

componentDidMount() {
  fetch('你的JSON文件路径')
    .then(res => res.json())
    .then(rawData => {
      // 假设你的数据里客户名称字段是customerName，记得改成你实际的字段名！
      const uniqueCustomerNames = [...new Set(rawData.map(item => item.customerName))];
      this.setState({ 
        data: rawData, // 保留原始数据用于其他下拉列表
        uniqueCustomers: uniqueCustomerNames // 存去重后的客户名称
      });
    })
    .catch(err => console.error('数据获取失败:', err));
}

然后渲染客户下拉列表的时候，用去重后的数组：

<select>
  {this.state.uniqueCustomers.map((name, index) => (
    // 要是有客户ID之类的唯一标识，最好用它当key，比index更稳定
    <option key={index} value={name}>
      {name}
    </option>
  ))}
</select>

方案2：保留完整的客户对象（需要关联其他属性时用） #

如果你的客户数据里还有其他需要用到的属性（比如客户ID、编码），那就要保留完整的对象，同时保证每个客户只出现一次。这时候可以用Array.reduce来构建唯一对象数组：

componentDidMount() {
  fetch('你的JSON文件路径')
    .then(res => res.json())
    .then(rawData => {
      // 同样，根据实际字段名修改customerName
      const uniqueCustomerObjects = rawData.reduce((acc, currentCustomer) => {
        // 检查当前客户是否已经在累加数组里存在
        const isDuplicate = acc.some(item => item.customerName === currentCustomer.customerName);
        if (!isDuplicate) {
          acc.push(currentCustomer);
        }
        return acc;
      }, []);
      
      this.setState({ 
        data: rawData,
        uniqueCustomers: uniqueCustomerObjects
      });
    })
    .catch(err => console.error('数据获取失败:', err));
}

渲染的时候就可以用对象里的多个属性了：

<select>
  {this.state.uniqueCustomers.map((customer) => (
    <option key={customer.id} value={customer.id}>
      {customer.customerName}
    </option>
  ))}
</select>

注意事项 #

• 一定要根据你实际的JSON数据结构修改字段名（比如把customerName改成你数据里对应的客户名字段）。
• 下拉列表的key尽量用唯一标识（比如客户ID），不要用数组索引，这样组件更新时性能更好也更稳定。

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