我有一个上下文存储,它工作正常。
我编写了一个自定义钩子来更容易地使用该上下文
下面是代码:
import { useState, useCallback } from 'react';
import { useStore, useActions, SET } from 'context';
const useContextStore = (key: string): [object | any, Function] => {
const store = useStore();
const action = useActions();
const defaultValues = '';
const [data, setData] = useState<object>(() => {
if (store) {
return store[key];
} else {
return defaultValues;
}
});
const storeData: Function = useCallback(
(payload: object) => {
action({ type: SET, path: key, payload: payload });
setData((prev) => ({ ...prev, ...payload }));
},
[action, key]
);
return [data, storeData];
};
export { useContextStore };
它工作正常,但是当我在其他组件中使用这个钩子时,它们在设置新存储时不会重新呈现
我尝试过的:就是替换代码
return [data, storeData];
与
return [store?.[key], storeData];
我的问题解决了,但我真的不知道为什么会发生这种事。
我的自定义uselocalstorage钩子也有类似的问题,我对发现这个问题感到非常沮丧。
- 我删除了
useCallback
,问题解决了,但我不知道为什么?**
- 我删除了
1条答案
按热度按时间bjg7j2ky1#
当你在做
...prev
的时候,它应该会抛出错误,因为你不能扩展string
。你的defaultValue
是一个字符串。只有当
data
是对象时,您的代码才能工作,而实际情况可能并非如此。此外,尝试更改初始化状态的方式。
到