React调用GitHub Gist API获取文件语言时如何去除重复项？

嘿，这个问题太常见了，我来给你几个简单有效的方案，直接就能用到你的FileTags组件里！

最简洁的ES6+方案：用Set自动去重 #

ES6引入的Set数据结构天生就会自动过滤重复值，搭配扩展运算符...就能快速把它转成数组，这是目前最简洁的实现方式：

// 假设你已经从API获取到了gists数组
const allFiles = gists.flatMap(gist => Object.values(gist.files));
// 提取所有语言，同时过滤掉可能的空值（比如有些文件没标记语言）
const allLanguages = allFiles.map(file => file.language).filter(Boolean);
// 一步去重
const uniqueLanguages = [...new Set(allLanguages)];

解释一下：

• flatMap把每个gist里的files对象转成数组，再合并成一个大的文件数组（因为每个gist可能有多个文件）
• filter(Boolean)会自动剔除null、undefined或者空字符串的语言项
• new Set(allLanguages)会创建一个不含重复值的集合，[...Set]把集合转回数组

兼容旧环境的方案：用Array.filter+indexOf #

如果你的项目需要兼容不支持ES6的环境，可以用数组的filter方法结合indexOf来手动过滤重复项：

const uniqueLanguages = allLanguages.filter((lang, index) => {
  // 只保留第一次出现的语言项
  return allLanguages.indexOf(lang) === index;
});

原理是：indexOf会返回当前语言在数组中第一次出现的索引，只有当当前元素的索引等于这个值时，才说明它是第一次出现，我们就保留它。

结合你的React组件完整示例 #

把去重逻辑整合到组件里，大概是这样的：

import { useState, useEffect } from 'react';

function FileTags() {
  const [uniqueLanguages, setUniqueLanguages] = useState([]);

  useEffect(() => {
    fetch('https://api.github.com/users/getify/gists')
      .then(res => res.json())
      .then(gists => {
        // 提取所有gist中的文件
        const allFiles = gists.flatMap(gist => Object.values(gist.files));
        // 提取语言并过滤空值
        const allLanguages = allFiles.map(file => file.language).filter(Boolean);
        // 去重
        const unique = [...new Set(allLanguages)];
        // 可选：如果需要按字母排序
        // const sortedUnique = unique.sort();
        setUniqueLanguages(unique);
      })
      .catch(err => console.error('获取Gists数据失败:', err));
  }, []);

  return (
    <div className="file-tags-container">
      {uniqueLanguages.map(lang => (
        <span key={lang} className="language-tag">
          {lang}
        </span>
      ))}
    </div>
  );
}

export default FileTags;

额外小提示 #

如果有些语言名称大小写不一致（比如markdown和Markdown），你可以在提取语言时统一转成小写或大写，再去重：

const allLanguages = allFiles
  .map(file => file.language?.toLowerCase()) // 统一转小写，可选链式调用避免undefined报错
  .filter(Boolean);

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