coderxian 2022-03-08 10:42 采纳率: 75%
浏览 323
已结题

useEffect无法监听到localStorage中的数据变化


 useEffect(() => {
   console.log("123");
  }, [localStorage.getItem("avatar")]);

用户修改头像之后,我想监听到localStorage中的数据变化。控制台看到localStorage中的数据确实是有改变的,但是这里没办法打印123,是怎么回事?

  • 写回答

2条回答 默认 最新

  • iloveozz 2022-03-08 11:32
    关注

    监听localStorage的改变是要使用事件来进行监听,useEffect中的第二个选项一般为依赖项,states变量。楼上给的链接中有正确的解决办法

    
    useEffect(() => {
      function checkUsetData() {
        const item = localStorage.getItem('avatar')
    
        if (item) {
          console.log("123")
        }
      }
    
    //绑定storage事件,监听storage变化
      window.addEventListener('storage', checkUsetData)
    //清除副作用,删除storage监听事件
      return () => {
        window.removeEventListener('storage', checkUsetData)
      }
    }, [])
    

    个人建议:希望了解一下Storage的事件变化和useEffect的依赖绑定
    有用的话,希望采纳一下

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • qq_40262972 2022-03-08 11:06
    关注
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 3月17日
  • 已采纳回答 3月9日
  • 创建了问题 3月8日

悬赏问题

  • ¥15 java连接sqlserver有问题
  • ¥15 yolov8 如何调cfg参数
  • ¥15 这个四人抢答器代码哪儿有问题?仿真程序怎么写?
  • ¥15 burpsuite密码爆破
  • ¥15 关于#ubuntu#的问题,如何解决?(相关搜索:移动硬盘)
  • ¥15 scikit安装之后import不了
  • ¥15 Ros2编译一个使用opencv的c++节点的时候,报了这个错误,请问怎么解决啊
  • ¥15 人脸识别相关算法 YOLO,AI等
  • ¥15 spark问题方便加V17675797079
  • ¥15 Python代码不打印的原因