如何在ReactJS中结合Fetch使用Filter过滤数组重复值

我来帮你梳理一下怎么把去重逻辑结合到Fetch获取数据的流程里，其实核心就是在获取到JSON数据后，先对数据进行去重处理，再把处理后的数据交给下拉列表渲染。下面给你一个完整的示例，你可以对照着调整自己的代码：

1. 组件基础结构与状态管理 #

首先我们用函数组件，通过useState来管理原始数据和去重后的下拉选项，用useEffect来触发Fetch请求：

import { useState, useEffect } from 'react';

function DropdownPage() {
  // 存储原始的JSON数据
  const [rawData, setRawData] = useState([]);
  // 存储去重后的第一个下拉选项（比如分类）
  const [uniqueCategories, setUniqueCategories] = useState([]);
  // 存储去重后的第二个下拉选项（比如品牌）
  const [uniqueBrands, setUniqueBrands] = useState([]);

  // 去重函数：接收原始数组和要提取的字段名，返回去重后的数组
  const getUniqueValues = (data, key) => {
    // 方法1：用你提到的filter方式，通过判断首次出现来过滤重复项
    return data.filter((item, index, self) => 
      self.findIndex(el => el[key] === item[key]) === index
    ).map(item => item[key]);

    // 方法2：用Set实现更简洁的去重（可选，效果一样）
    // return [...new Set(data.map(item => item[key]))];
  };

  // 发起Fetch请求并处理数据
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('/your-data.json'); // 替换成你的JSON文件路径
        const data = await response.json();
        setRawData(data); // 先存原始数据备用

        // 对数据进行去重，更新下拉选项的状态
        const categories = getUniqueValues(data, 'category');
        const brands = getUniqueValues(data, 'brand');
        setUniqueCategories(categories);
        setUniqueBrands(brands);
      } catch (error) {
        console.error('获取数据失败:', error);
      }
    };

    fetchData();
  }, []); // 空依赖数组确保只在组件挂载时执行一次

  return (
    <div>
      {/* 第一个去重后的下拉列表 */}
      <select>
        <option value="">请选择分类</option>
        {uniqueCategories.map((category, index) => (
          <option key={index} value={category}>{category}</option>
        ))}
      </select>

      {/* 第二个去重后的下拉列表 */}
      <select>
        <option value="">请选择品牌</option>
        {uniqueBrands.map((brand, index) => (
          <option key={index} value={brand}>{brand}</option>
        ))}
      </select>

      {/* 第三个下拉列表（假设不需要去重，直接用原始数据） */}
      <select>
        <option value="">请选择产品</option>
        {rawData.map((item, index) => (
          <option key={index} value={item.product}>{item.product}</option>
        ))}
      </select>
    </div>
  );
}

export default DropdownPage;

2. 关键步骤说明 #

• Fetch数据的时机：放在useEffect里，确保组件挂载后只请求一次数据，避免重复请求。
• 去重函数的复用性：getUniqueValues可以通用，你只需要传入原始数组和需要去重的字段名（比如你的JSON里对应的type、name等字段，替换示例里的category和brand就行）。
• 两种去重方式：
  • 方法1是你提到的filter实现，通过findIndex判断当前项是不是第一次出现，从而过滤掉重复项。
  • 方法2用Set更简洁，因为Set本身不允许重复值，把所有字段值放入Set后再转回数组，就能快速得到去重结果。
• 状态更新逻辑：获取到去重后的数组后，更新对应的状态，下拉列表直接渲染这些去重后的状态数组即可，不用再处理原始数据。

3. 适配你的实际情况 #

你只需要做这几步调整：

1. 把fetch('/your-data.json')里的路径换成你自己的JSON文件路径。
2. 把getUniqueValues调用时的category、brand换成你JSON数据中对应下拉列表的字段名。
3. 如果你的下拉需要绑定选中值，再额外加状态管理选中项即可。

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