在渲染消费者之前等待 React 上下文数据加载？

Question

我在 Typescript 中使用 React 上下文来加载有关登录我的应用程序的用户的用户数据（姓名、ID、电子邮件等）。但是，当我使用 useContext 挂钩访问从 API 获取的数据时，如果挂钩尚未完成（可以理解），返回的数据可能为 null/未定义。但是，如果我有其他依赖于用户数据的挂钩（例如使用用户 ID 查找数据），我不希望该用户数据可能未定义。我知道我可以在上下文上使用 isLoading 字段，但由于我将在作为该上下文提供程序的子项的几乎每个屏幕上都需要此用户数据，因此我希望上下文提供程序的子项都不会被加载/渲染，直到用户数据完成了，所以当我使用useContext访问用户数据时，必须定义它。有没有办法做到这一点，或者我没有以正确的方式考虑上下文？

这是上下文提供者的示例：

import { createContext, useState } from "react";

const UserContext = createContext({});

export const UserProvider = ({ children }) => {
    const [user, setUser] = useState({});
    setTimeout(() => setUser(<something>, 1000);

    return (
        <UserContext.Provider value={{ user, setUser }}>
            {children}
        </UserContext.Provider>
    );
};

export default UserContext;

这是我访问消费者上下文的地方：

const { data } = useUserDataContext()
// typeof data is any[] | undefined
// typeof data should just be any[]

Answer 1

我希望在用户数据完成之前不加载/渲染上下文提供程序的子级

然后你的用户提供程序应该返回 null（或加载程序，或其他东西），直到它拥有数据，此时它可以渲染其子项