React Hooks处理API返回数据baseSymbol去重及重渲染问题

数据老陈

2026-8-22

解决React Hooks获取API数据后去重并触发重渲染的问题

这里给你两种实用的去重方案，按需选择即可：

方案一：仅提取唯一的baseSymbol字符串数组

如果只需要所有不重复的baseSymbol值（比如用于下拉选项的标签），可以这么处理：

const URL = "https://api.coincap.io/v2/markets/";
const [cryptoOptions, setCryptoOptions] = useState([]);

useEffect(() => {
    fetch(URL)
      .then((res) => res.json())
      .then((data) => {
        // 利用Set的自动去重特性处理baseSymbol
        const uniqueBaseSymbols = [...new Set(data.data.map(item => item.baseSymbol))];
        setCryptoOptions(uniqueBaseSymbols);
      });
  }, []);

方案二：保留完整对象，每个baseSymbol仅存一条数据

如果需要保留每条数据的完整信息，但每个baseSymbol只保留首次（或末次）出现的条目，用Map处理更稳妥：

const URL = "https://api.coincap.io/v2/markets/";
const [cryptoOptions, setCryptoOptions] = useState([]);

useEffect(() => {
    fetch(URL)
      .then((res) => res.json())
      .then((data) => {
        // 借助Map的key唯一性去重，这里保留第一个出现的baseSymbol对应条目
        const uniqueMap = new Map();
        data.data.forEach(item => {
          if (!uniqueMap.has(item.baseSymbol)) {
            uniqueMap.set(item.baseSymbol, item);
          }
        });
        // 将Map转换为数组格式
        const uniqueData = Array.from(uniqueMap.values());
        setCryptoOptions(uniqueData);
      });
  }, []);