嘗試使用 useEffect 為 localStorage 構建事件監聽器

Question

我正在嘗試實現一個事件監聽器，它觸發一個 useEffect 函數來呈現一個購物袋。 目前購物袋僅在重新加載頁面后出現。 這應該立即發生。 我已經為我的問題構建了一個沙箱： https://codesandbox.io/s/vigilant-oskar-drsvy?file=/src/App.js 。 單擊“單擊它”按鈕時，除了重新加載頁面時，什么都不會出現。

這里也是代碼：

export default function App() {
  const [storageData, setStorageData] = useState(localStorage.getItem("alert"));

  useEffect(() => {
    setStorageData(localStorage.getItem("alert"));
  }, []);

  //insert eventlistener to dependency array of useEffect

  return (
    <div className="App">
      <button
        onClick={() => {
          localStorage.setItem("alert", "ShoppingBag");
        }}
      >
        click it
      </button>
      <div>{storageData}</div>
    </div>
  );
}

Answer 1

您需要反轉您的操作方式 - 當您storageData更改時，您應該執行localStorage.setItem ，然后您執行setStorageData並且您的useEffect將獲取更改並保存它。

https://codesandbox.io/s/naughty-herschel-469i1

 import { useEffect, useState } from "react"; import "./styles.css"; export default function App() { const [storageData, setStorageData] = useState(localStorage.getItem("alert")); useEffect(() => { localStorage.setItem("alert", storageData); }, [storageData]); //insert eventlistener to dependency array of useEffect return ( <div className="App"> <button onClick={() => { setStorageData("ShoppingBag"); }} > click it </button> <div>{storageData}</div> </div> ); }