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>
  );
}

尝试使用 useEffect 为 localStorage 构建事件侦听器

1 个答案: