我有一个自定义挂钩来管理localStorage
个,如下所示:
import { useEffect, useState } from 'react'
export default function useLocalStorage(key, initValue) {
const [state, setState] = useState(() => {
const value = localStorage.getItem(key);
if (value !== null) {
return JSON.parse(value);
}
localStorage.setItem(key, JSON.stringify(initValue));
return initValue;
})
useEffect(() => {
localStorage.setItem(key, state);
}, [key, state])
return [state, setState];
}
此自定义挂钩声明为在一个屏幕中对两个或多个组件使用相同的localstorage键.e、 g.
const [state, setState] = useLocalStorage('key', false);
此时,由于使用useLocalStorage
的组件希望根据localStorage
的状态变化工作,因此我们try 使用useLocalStorage
返回的状态作为useEffect
的第二个参数.
useEffect(() => {
foobar()
}, [state]);
我希望useEffect
中的foobar()
函数在声明此useEffect
的所有组件中的"状态"发生变化时能够工作.然而,foobar()
只适用于使用相同useEffect
的多个组件中的一个组件.为什么会这样?我如何让它按我想要的方式工作?