如何在React js中映射新数组中的图标？

Question

我创建了一个新数组，我可以映射该数组中的其他项目，但无法映射图标。它显示[对象对象]

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

const allfillteredSkills = [
  'All',
  ...new Set(skillData.map((item) => item.category + item.icon)),
];

console.log(allfillteredSkills);

Answer 1

在执行 + 运算符之前检查

item.icon

的类型并将其转换为字符串。

[object Object]

是当

object

格式化为

string

时发生的情况

这是发生的情况的示例：

console.log(['All', ...new Set(["categ" + {foo:"bar"}])])
> ['All', 'categ[object Object]']

要将图标转换为

string

，根据

item.icon

的类型，您有多种解决方案。

如果它是一个对象，您可以访问它的属性（例如

item.icon.name

）

如果您想保留所有信息，

JSON.stringify(item.icon)

也可能有用