尝试使用 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> ); }