將 AuthContext.js 寫在單獨的文件中

Question

我已經在像下面這樣的單獨文件中編寫了 AuthContext.js

export const AuthContext = createContext({
  isLoggedIn: false,
  login: () => {},
  logout: () => {},
});
 
const AuthContextProvider = (props) => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
 
  const loginHandler = useCallback(() => {
    setIsLoggedIn(true);
  }, []);
 
  const logoutHandler = useCallback(() => {
    setIsLoggedIn(false);
  }, []);
 
  const initialValue = {
    isLoggedIn: isLoggedIn,
    login: loginHandler,
    logout: logoutHandler,
  };
 
  return (
    <AuthContext.Provider value={initialValue}>
      {props.children}
    </AuthContext.Provider>;
  );
};
 
export default AuthContextProvider;

然后我在App.js中手動導入它們

我認識到，當我登錄時， App.js永遠不會重新呈現，即使isLoggedIn的值發生變化。

導致routes變量永遠不會獲得新值，組件也不會改變。

App.js 文件

const App = () => {
  const authCtx = useContext(AuthContext);
  const { isLoggedIn } = authCtx;
  let routes;
  if (isLoggedIn) {
    routes = (
      <Switch>
        <Route path="/" exact>
          <Users />
        </Route>
        <Route path="/places/new" exact>
          <NewPlace />
        </Route>
        <Route path="/:userId/places" exact>
          <UserPlaces />
        </Route>
        <Route path="/places/:placeId">
          <UpdatePlace />
        </Route>
 
        <Redirect to="/" />
      </Switch>
    );
  } 
  else {
    routes = (
      <Switch>
        <Route path="/" exact>
          <Users />
        </Route>
        <Route path="/:userId/places" exact>
          <UserPlaces />
        </Route>
        <Route path="/signin" exact>
          <SignIn />
        </Route>
        <Route path="/signup" exact>
          <Signup />
        </Route>
        <Redirect to="/signin" />
      </Switch>
    );
  }

  return (
    <AuthContextProvider>
      <BrowserRouter>
        <MainNavigation />
        <main>{routes}</main>
      </BrowserRouter>
    </AuthContextProvider>
  );
};
 
export default App;

在這種情況下我的錯誤是什么。

Answer 1

如果App是呈現AuthContextProvider組件的組件，則它無法訪問它提供的 Context 值。 AuthContextProvider必須在 ReactTree 中呈現得更高，以便App能夠訪問 Context 值。 當前App正在接收傳遞給React.createContext的默認值。

export const AuthContext = createContext({
  isLoggedIn: false,
  login: () => {},
  logout: () => {},
});

當 ReactTree 中沒有任何上下文提供者更高時，使用默認值。

將AuthContextProvider移動到 ReactTree 中更高的位置，即包裝App 。

應用程序

const App = () => {
  const { isLoggedIn } = useContext(AuthContext);

  let routes;

  if (isLoggedIn) {
    routes = (
      <Switch>
        <Route path="/" exact>
          <Users />
        </Route>
        <Route path="/places/new" exact>
          <NewPlace />
        </Route>
        <Route path="/:userId/places" exact>
          <UserPlaces />
        </Route>
        <Route path="/places/:placeId">
          <UpdatePlace />
        </Route>
        <Redirect to="/" />
      </Switch>
    );
  } 
  else {
    routes = (
      <Switch>
        <Route path="/" exact>
          <Users />
        </Route>
        <Route path="/:userId/places" exact>
          <UserPlaces />
        </Route>
        <Route path="/signin" exact>
          <SignIn />
        </Route>
        <Route path="/signup" exact>
          <Signup />
        </Route>
        <Redirect to="/signin" />
      </Switch>
    );
  }

  return (
    <>
      <MainNavigation />
      <main>{routes}</main>
    </>
  );
};
 
export default App;

<AuthContextProvider>
  <BrowserRouter>
    <App />
  </BrowserRouter>
</AuthContextProvider>