反应中的自定义挂钩不会重新呈现子组件答案

【问题标题】：custom hook in react does not rerender child component反应中的自定义挂钩不会重新呈现子组件
【发布时间】：2023-02-01 17:10:43
【问题描述】：

我有一个上下文存储，它工作正常。

我写了一个自定义钩子来更轻松地使用该上下文

这是代码：

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 };

它工作正常，但是当我在其他组件中使用 This hook 时，它们不会在设置新商店时重新呈现

我尝试过的是：替换代码

return [data, storeData];

和

return [store?.[key], storeData];

我的问题解决了，但我真的不知道为什么会这样……

我的自定义 useLocalStorage 挂钩遇到了类似的问题，我对发现问题感到非常沮丧。

【问题讨论】：

标签： javascript reactjs typescript react-hooks react-context

【解决方案1】：

这是因为您的 useState 挂钩只初始化了一次。当你的自定义钩子第一次被调用时，数据的值被初始化。随后更新商店时，您的数据不会更新。如果要在初始化后更新数据，则需要在存储更新时调用setData。

我希望这能为您指明正确的方向。

【讨论】：

在函数 storeData 中，我设置数据，并且我不改变地执行它。