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


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

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

监听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的依赖绑定
有用的话,希望采纳一下

https://www.ghcc.net/node/3807446