TypeScript+React中使用new Set赋值useState报类型错误

触发类型错误的核心原因是Array.from的传参错误，额外给Set实例套了一层数组，导致最终生成的数据类型和useState声明的状态类型不匹配。
另外原代码还有两个不符合规范的小问题：

• 状态声明用了大写包装类型String，TS项目中应优先使用原始类型string，避免类型兼容问题
• useEffect内错误地将setSubCategories的调用结果作为清理函数返回，且未将products加入依赖数组，不符合React Hooks的使用规则

原代码中去重赋值的核心写法为：

Array.from([new Set(products.map((p) => p.category))])

执行逻辑拆解：

1. products.map(p => p.category) 生成string[]类型的分类名数组
2. new Set(...) 接收上述数组，生成Set<string>类型的去重集合
3. 外层套的[]把这个Set实例包裹成了长度为1的普通数组，即[Set<string>]，类型为Set<string>[]
4. Array.from接收到的入参是这个元素为Set的数组，遍历后返回的结果自然也是Set<string>[]类型，和状态要求的string[]类型完全不匹配，因此TS抛出类型错误。

去掉Set外层多余的方括号，同时修正类型声明、useEffect的写法问题即可：

const [subCategories, setSubCategories] = useState<string[]>([]);
useEffect(() => {
  // 直接将Set实例传入Array.from，转换为去重后的字符串数组
  setSubCategories(Array.from(new Set(products.map((p) => p.category))));
  // 不需要return setState调用，若无需清理逻辑可省略return
}, [products]); // 将products加入effect依赖数组

如果习惯用展开运算符，也可以写成等价形式：

setSubCategories([...new Set(products.map(p => p.category))]);

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