如何將 Set 與 useRef 一起使用？

Question

我正在嘗試將Set與useRef一起使用。 這是我嘗試過的。

export default function App() {
  const data = useRef<Set<string>>(new Set());

  const add = () => {
    data.current = new Set([...Array.from(data.current), "Add"]);
  };

  const show = () => {
    console.log(data.current);
  };

  return (
    <div className="App">
      <button onClick={add}>Add</button>
      <button onClick={show}>Show</button>
    </div>
  );
}

更新后檢查值時，我得到了Set {} 。 這里到底發生了什么？

Answer 1

您的代碼實際上工作正常。 Set {}只是控制台顯示集合的方式。 您可以在展開時看到（單擊添加然后顯示后），數據就在那里。

關於添加到集合而不是復雜傳播的另一個答案也是正確的順便說一句——你不需要關心不可變的 state 轉換與參考。 但這是代碼異味而不是錯誤。 您的代碼仍然有效。

Answer 2

正如super在評論中所說

ref 沒有任何自動更新，因此您不需要重新創建 object。 只需添加到現有集合。

const add = () => {
  data.current.add("Add");
};