React中使用Set存储唯一元素：添加方式与遍历展示问题咨询

嘿，我来帮你搞定这两个问题！

一、正确向Set State添加唯一元素的方式 #

首先要注意：React的state是不可变的，直接修改原Set不会触发组件重渲染，因为Set是引用类型，React浅比较时会认为state的引用没变化，所以不会更新。

你原来的写法存在问题：

• items.add(input)：直接修改了原Set，但React检测不到这个变化，组件不会重新渲染；
• setItems(items.add(input))：add方法返回的是原Set本身，还是同一个引用，同样无法触发更新。

正确的做法是创建一个新的Set，包含原Set的所有元素，再添加新元素，然后更新state：

const addNumber = () => {
  // 创建新Set，复制原Set的内容
  const newItems = new Set(items);
  newItems.add(input); // Set会自动处理重复，无需额外判断
  setItems(newItems);
};

更简洁的函数式更新写法（推荐，尤其当state更新依赖于前一次state时）：

const addNumber = () => {
  setItems(prevItems => new Set(prevItems).add(input));
};

二、遍历Set展示数据的方法 #

Set本身没有map方法，所以直接调用items.map()会报错map is not a function。你需要先把Set转换成数组，再用map渲染：

方法1：使用Array.from() #

<ul>
  {Array.from(items).map(item => (
    <li key={item}>{item}</li>
  ))}
</ul>

方法2：使用扩展运算符... #

<ul>
  {[...items].map(item => (
    <li key={item}>{item}</li>
  ))}
</ul>

注意：React列表渲染需要唯一的key属性，这里用Set中的元素本身作为key就可以，因为Set里的元素都是唯一的。

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