Javascript 正在尝试使用useEffect为localStorage构建eventlistener

我正在尝试实现一个eventlistener，它触发useEffect函数来呈现购物袋。目前，购物袋只有在重新加载页面后才会出现。这应该立即发生。 我已经为我的问题构建了一个沙箱：。 单击“单击”按钮时，除了重新加载页面外，不会显示任何内容

代码如下：

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

导出默认函数App（）{
const[storageData，setStorageData]=useState（localStorage.getItem（“警报”）；
useffect（（）=>{
设置存储数据（localStorage.getItem（“警报”）；
}, []);
//将eventlistener插入useEffect的依赖项数组
返回(
{
setItem（“警报”、“购物袋”）；
}}
>
点击它
{storageData}
);
}

您需要反向操作—当您

存储数据

更改时，您应该执行

本地存储.setItem

，然后执行

设置存储数据

，您的

使用效果

将拾取更改并保存它

从“react”导入{useffect，useState}；
导入“/styles.css”；
导出默认函数App（）{
const[storageData，setStorageData]=useState（localStorage.getItem（“警报”）；
useffect（（）=>{
setItem（“警报”，storageData）；
}，[storageData]）；
//将eventlistener插入useEffect的依赖项数组
返回(
{
设置存储数据（“购物袋”）；
}}
>
点击它
{storageData}
);
}

您需要反向操作—当您

存储数据

更改时，您应该执行

本地存储.setItem

，然后执行

设置存储数据

，您的

使用效果

将拾取更改并保存它

从“react”导入{useffect，useState}；
导入“/styles.css”；
导出默认函数App（）{
const[storageData，setStorageData]=useState（localStorage.getItem（“警报”）；
useffect（（）=>{
setItem（“警报”，storageData）；
}，[storageData]）；
//将eventlistener插入useEffect的依赖项数组
返回(
{
设置存储数据（“购物袋”）；
}}
>
点击它
{storageData}
);
}

在本地存储中设置某些内容不会触发重新呈现。在onClick处理程序中，需要调用状态更新程序函数setStorageData（'shoppingBag'）。本地存储是指即使在刷新应用程序时也能保持应用程序的价值。单击按钮后，可能需要更新

storageData

。您必须添加

setStorageData（localStorage.getItem（“警报”）在按钮中单击回调。在本地存储中设置某些内容不会触发重新呈现。在onClick处理程序中，您需要调用状态更新程序函数setStorageData（'shoppingBag'）。本地存储是指即使在刷新应用程序时也能保持应用程序的价值。单击按钮后，可能需要更新
storageData
。您必须添加
setStorageData（localStorage.getItem（“警报”）在按钮中单击回调。感谢您的回答，但我在另一个组件中设置了localStorage，我想听听该项是否已设置或更新。如果它改变了，我想重新呈现这个组件。然后你必须重写
localStorage.setItem
来调度你所监听的某种事件，看这里：，但是“反应方式”是将该状态提升到某个公共父组件，并将值和setter作为道具传递给这两个组件。谢谢您的回答，但我在另一个组件中设置了localStorage，我想听听该项是否已设置或更新。如果它改变了，我想重新呈现这个组件。然后你必须重写
localStorage.setItem
来分派你所监听的某种事件，看这里：，但是“反应方式”是将该状态提升到某个公共父组件，并将值和setter作为道具传递给这两个组件。