Question

我有一个自定义钩子定义如下：

export const useData = (): [boolean, () => Promise<void>] => {

    const [isLoading, setIsLoading] = useState(false);

    const fetch = async () => {
        setIsLoading(true);
        await new Promise<void>(resolve => setTimeout(resolve, 2500)); // mock a network request timeout
        setIsLoading(false);
    };

    return [isLoading, fetch];
};

我有两个组件 A 和 B 然后使用钩子如下：

const [ isLoading, fetch ] = useData();

我的问题是当组件 A 调用 fetch 时，isLoading 在组件 A 中反映了正确的值，但在组件 B 中没有。换句话说，当 isLoading 调用 B 时，fetch 永远不会在 A 中更新。我在这里遗漏了什么吗？

任何建议将不胜感激。谢谢。

Answer 1

<块引用>

我的问题是当组件 A 调用 fetch 时，isLoading 反映了组件 A 中的正确值，但组件 B 中没有。换句话说，当 A 调用 fetch 时，B 中的 isLoading 永远不会更新。我是在这里遗漏了什么？

是的，钩子不应该这样使用。来自文档：

<块引用>

使用相同 Hook 的两个组件是否共享状态？编号自定义挂钩是一种重用有状态逻辑的机制（例如设置一个订阅并记住当前值），但每次使用自定义 Hook，其中的所有状态和效果都完全隔离。

我认为您必须以某种方式将钩子与 Context API 结合以实现您的目标。

自定义挂钩状态更改未更新所有组件

1 个答案: