尝试使用 useEffect 为 localStorage 构建事件监听器答案

【问题标题】：Trying to build an eventlistener for localStorage with useEffect尝试使用 useEffect 为 localStorage 构建事件监听器
【发布时间】：2021-06-10 02:40:51
【问题描述】：

我正在尝试实现一个事件监听器，它触发一个 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>
  );
}

【问题讨论】：

在本地存储中设置某些内容不会触发重新渲染。在您的 onClick 处理程序中，您需要调用状态更新程序函数 setStorageData('shoppingBag`) 。本地存储是为了保持你的应用程序的价值，即使你刷新。
也许你需要在按钮点击后更新storageData。您必须在按钮单击回调中添加setStorageData(localStorage.getItem("alert"));。

标签： javascript reactjs addeventlistener event-listener use-effect

【解决方案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>
  );
}

【讨论】：

感谢您的回答，但我在另一个组件中设置了 localStorage，并且我想听一下是否设置或更新了该项目。如果它改变了，我想重新渲染这个组件。
那么你必须重写 localStorage.setItem 来调度你收听的某种事件，看这里：stackoverflow.com/questions/26974084/…，但“反应方式”是将状态提升到一些共同的父组件，并将值和设置器作为道具传递给两个组件。