使用未定义的默认值类型检查响应上下文

Question

只是想找出键入检查 React Context 的正确方法是什么。 这就是我在我的上下文中所拥有的：

import React, { useContext } from "react";
import { UserAuth } from "../../types";

interface Props {
  children: React.ReactChild;
}

interface IAuthContext {
  currentUser: UserAuth;
  setCurrentUser: React.Dispatch<React.SetStateAction<UserAuth>>;
}

const defaultUser: UserAuth = {
  userId: "",
  idToken: "",
  timestamp: "",
  authenticated: false,
};

const AuthContext = React.createContext<IAuthContext | null>(null);

const AuthProvider = ({ children }: Props) => {
  const [currentUser, setCurrentUser] = React.useState<UserAuth>(defaultUser);
  return (
    <AuthContext.Provider value={{ currentUser, setCurrentUser }}>
      {children}
    </AuthContext.Provider>
  );
};

const useAuthContext = () => {
  const data  = useContext(AuthContext);
  if (data === null) {
    throw new Error("This hook should be used inside SomeAppComponent");
  }
  return data;
};

export { AuthProvider, useAuthContext };

然后我用提供者包装我的 App 组件：

ReactDOM.render(
  <React.StrictMode>
    <AuthProvider>
      <ThemeProvider theme={defaultTheme}>
        <GlobalStyle />
        <ToastContainer />
        <App />
      </ThemeProvider>
    </AuthProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

最后在我的 App 组件中，我尝试像这样使用上下文：

export const App: FC = () => {
  const { currentUser, setCurrentUser } = useAuthContext();
  console.log(currentUser);
  return (
    <Router>
      <Switch>
        <Route exact path="/signup" component={SignUp} />
        <Route exact path="/login" component={LogIn} />
        <Route exact path="/" component={Dashboard} />
        <Route exact path="/dashboard" component={Dashboard} />
      </Switch>
    </Router>
  );
};

像这样，我的应用程序抛出了我提供的错误：“throw new Error("This hook should be used inside SomeAppComponent");”

什么是正确的方法？

我像这样编辑了我的代码：

interface IAuthContext {
  currentUser: UserAuth;
  setCurrentUser: React.Dispatch<React.SetStateAction<UserAuth>> | null;
}

const defaultUser: UserAuth = {
  userId: "",
  idToken: "",
  timestamp: "",
  authenticated: false,
};

const AuthContext = React.createContext<IAuthContext>({
  currentUser: defaultUser,
  setCurrentUser: null,
});

它有效，但我觉得这不是正确的方法，有什么帮助吗？ 谢谢，F。

Answer 1

是的，我认为您的初始解决方案是更好的方法。

我在这里重现它并且它运行良好而不会引发错误。