同步加载反应提供商组件的模式

Question

my：brain：正在爆炸。

在我的应用程序的词根中，我想设置一个用户提供者（以下简化版本）。

我希望它的所有消费者都相信提供商拥有用户。

使用以下实现，我需要对所有用途进行零检查：

  const userContext = useContext(UserContext)
  const userId = userContext!.id   // I do not want that bang(!)

我当前的实施：

interface IUserContext {
  id: string
  email: string
}
const UserContext = React.createContext<IUserContext|null>(null);
const UserProvider: React.FC = ({ children }) => {
  const [user, setUser] = useState(initalContext);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    client
      .query<CurrentUserQuery>({
        query: currentUserQuery
      })
      .then((res) => {
        if (res.error) {
          logger(res.error);
        }
        if (res.data.me) {
          setUser(res.data.me);
          setLoading(false);
        }
      });
  });
  if (loading) {
    return <Loading />;
  }
  return <UserContext.Provider value={user}>{children}</UserContext.Provider>;
};

我知道我可以做类似的事情：

const emptyUser = {
  id: '',
  email: ''
}
const UserContext = React.createContext(emptyUser);

，但这对我来说真的很糟糕。

有人提出了一个干净的解决方案吗？

谢谢！

Answer 1

您声明上下文接受IUserContext或null，这就是为什么您需要Bang！。

从上下文解开User的解决方案是如果用户为null，则将异常（无论如何都不应该发生吗？）。然后，打字稿会推断您的用户实际上不是null，而是实际的User

const userContext = createContext<User | null>(null)
const useUser = (): User => {
  const user = useContext(userContext)
  if (user === null) {
    throw new Error('You forgot the provider')
  }
  return user // This is a User
}