如何在React TypeScript中将Set数据结构用作状态？

初始化Set状态 #

直接用useState初始化空Set，同时指定TypeScript类型：

const [products, setProducts] = React.useState<Set<string>>(new Set());

添加值 #

React状态是不可变的，不能直接修改原Set，必须创建新的Set实例来更新。最好用函数式更新，避免闭包捕获旧状态的问题：

// 添加新商品，重复值会自动被忽略
setProducts(prev => new Set(prev).add("new product"));

移除值 #

同样通过创建新Set来执行删除操作：

// 删除指定商品
setProducts(prev => {
  const newSet = new Set(prev);
  newSet.delete("product-to-remove");
  return newSet;
});

渲染Set内容 #

如果需要把Set里的内容渲染到组件，用Array.from()或者扩展运算符转成数组即可：

return (
  <ul>
    {[...products].map(product => (
      <li key={product}>{product}</li>
    ))}
  </ul>
);

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