React中如何在新数组映射图标？遇[object Object]问题求助

DevOps 小满

2026-7-2

问题原因与解决方案

问题根源

你看到[object Object]是因为item.icon是对象类型，JavaScript里对象和字符串直接拼接时，会自动把对象转为默认的字符串表示[object Object]。另外你当前用item.category + item.icon作为Set的元素，既没法正确保留图标对象，也达不到按分类去重的目的。

解决方案

根据你的需求，提供两种处理方式：

方式1：按分类去重，同时保留对应图标

如果要保留每个分类的图标，先通过Map建立分类和图标的映射关系，再转换为目标数组：

import { skillData } from '../../data/pageData';

// 建立分类与图标的映射，自动去重分类
const categoryIconMap = new Map();
skillData.forEach(item => {
  // 这里只保留首次出现的分类图标，若要保留最后出现的，去掉if判断直接set即可
  if (!categoryIconMap.has(item.category)) {
    categoryIconMap.set(item.category, item.icon);
  }
});

// 转换成包含'All'的目标数组
const allfilteredSkills = [
  'All',
  ...Array.from(categoryIconMap.entries()).map(([category, icon]) => ({ category, icon }))
];

console.log(allfilteredSkills);

方式2：先提取唯一分类，再匹配对应图标

先通过Set获取所有唯一分类，再为每个分类匹配对应的图标：

import { skillData } from '../../data/pageData';

// 获取所有唯一分类
const uniqueCategories = [...new Set(skillData.map(item => item.category))];
// 生成包含分类和对应图标的数组
const allfilteredSkills = [
  'All',
  ...uniqueCategories.map(category => {
    // 找到当前分类对应的第一个图标，可根据需求调整匹配逻辑
    const targetItem = skillData.find(item => item.category === category);
    return { category, icon: targetItem.icon };
  })
];

console.log(allfilteredSkills);