React中如何展示去重后的同名称行业数据？

要实现每个行业名称仅展示一次，核心是对后端返回的数据进行去重处理，下面提供两种常用方案：

方案1：仅提取唯一的行业名称 #

如果只需要展示行业名称，不需要保留对应的数据，可以直接提取去重后的行业列表：

修改数据获取逻辑，在更新状态前用Set实现去重：

const Home = () => {
  const [uniqueSectors, setUniqueSectors] = useState([]);

  const datalist = async () => {
    const result = await fetch("http://localhost:5000/api/getalldata");
    const dresult = await result.json();
    // 提取所有行业名称并去重
    const sectors = [...new Set(dresult.map(item => item.sector))];
    setUniqueSectors(sectors);
  };
  
  useEffect(() => {
    datalist();
  }, []);

  return (
    <>
      {/* 渲染去重后的行业名称，用sector作为唯一key */}
      {uniqueSectors.map((sector) => (
        <h1 key={sector}>{sector}</h1>
      ))}
    </>
  );
};

export default Home;

方案2：按行业分组保留完整数据 #

如果需要展示行业名称同时，还要显示该行业下的其他数据，可以用Map对数据按行业分组：

const Home = () => {
  const [sectorGroups, setSectorGroups] = useState([]);

  const datalist = async () => {
    const result = await fetch("http://localhost:5000/api/getalldata");
    const dresult = await result.json();
    
    // 按行业名称分组，自动去重行业
    const groups = new Map();
    dresult.forEach(item => {
      // 可选：去除前后空格、统一大小写，避免因格式差异导致的重复
      const sector = item.sector.trim().toLowerCase();
      if (!groups.has(sector)) {
        groups.set(sector, []);
      }
      groups.get(sector).push(item);
    });
    
    // 转换为数组格式方便渲染，还原首字母大写
    setSectorGroups(Array.from(groups.entries()).map(([sector, items]) => ({
      sector: sector.charAt(0).toUpperCase() + sector.slice(1),
      items
    })));
  };
  
  useEffect(() => {
    datalist();
  }, []);

  return (
    <>
      {sectorGroups.map(({ sector, items }) => (
        <div key={sector}>
          <h1>{sector}</h1>
          {/* 渲染该行业下的具体数据示例 */}
          <ul>
            {items.map(item => (
              <li key={item.id}>{item.name}</li>
            ))}
          </ul>
        </div>
      ))}
    </>
  );
};

export default Home;

注意事项 #

• 若行业名称存在大小写或空格差异，可通过toLowerCase()、trim()统一格式后再去重
• 渲染列表时必须添加唯一的key属性，推荐使用行业名称（确保去重后唯一）或原始数据的id
• 尽量在数据获取阶段完成去重，避免每次渲染重复计算，提升组件性能

内容的提问来源于stack exchange，提问作者Subhas Chandra Bose