如何在依赖数组中使用benchmarkActiveTab
的localstorage值?该值在localstorage中更改,但当该值更改时,useEffect
未运行
const [activeTab, setActiveTab] = useState(
localStorage.getItem("benchmarkActiveTab") || 0
)
useEffect(() => {
async function getBenchmarkTimes() {
// this function doesn't run
}
getBenchmarkTimes()
}, [activeTab])
我尝试在localStorage.getItem('benchmarkActiveTab')
更改时运行useEffect
,但useEffect不运行。
2条答案
按热度按时间fd3cxomn1#
您需要侦听
storage
事件wfveoks02#
在你的代码中,状态
activeTab
在初始渲染时只设置了一次。它不会再改变。所以效果取决于它也不会再运行。你可以使用
useSyncExternalStore
钩子。这个钩子接受两种参数:subscribe
和getSnapshot
。每次subscribe
调用回调,React都会调用getSnapshot
并获取一个新的快照。如果快照发生变化(当Object.is
的结果为false时),React会重新渲染组件。参见完整示例here。