为什么我的 header 组件不会在上下文更改时更新？

Question

我正在构建一个 React 应用程序，但当 Auth Context Provider 发生更改时，我无法更新我的 Header 组件。但是，仪表板组件按预期工作。如果我硬刷新我的应用程序，我会看到在 Header 中应用了上下文更改，但这是不可取的。

这是我的 Routes.js 文件。

const Routes = () => (
  <Router>
    <AuthProvider>
      <Header />
    </AuthProvider>
      <Suspense fallback={<LoadingSpinner />}>
        <Switch>
          <Route exact path='/public/welcome' component={Welcome} />
          <Route exact path='/public/about' component={About} />
          <AuthProvider>
            <PrivateRoute exact path='/secure/dashboard'>
              <Dashboard />
            </PrivateRoute>
          </AuthProvider>
        </Switch>
      </Suspense>
  </Router>

这是我的 Header.js 文件。

const Header = () => {

  const { auth, setAuth } = useAuth();
  const { isLoggedIn } = auth;

  return (
    <div id='header'>
     {isLoggedIn ? ( <div>I'm logged in!</div> ) : ( <div>I'm NOT logged in!</div> )};
    </div>
 );
};

export default Header;

出于某种原因，Header 在页面重新加载之前不会反映对 Auth 上下文的更新。

Answer 1

您似乎正在呈现多个身份验证上下文。您可能只需要所有消费者都使用的一个。

示例：

const Routes = () => (
  <AuthProvider>
    <Router>
      <Header />
      <Suspense fallback={<LoadingSpinner />}>
        <Switch>
          <Route exact path='/public/welcome' component={Welcome} />
          <Route exact path='/public/about' component={About} />
          <PrivateRoute exact path='/secure/dashboard'>
            <Dashboard />
          </PrivateRoute>
        </Switch>
      </Suspense>
    </Router>
  </AuthProvider>
);

为什么我的 header 组件不会在上下文更改时更新？

Why won't my header component update when the context changes?

reactjs

react-router-dom

react-context