所以我在我的 Gatsby 應用程序（基本上是用 React 編寫的）中使用 React 的上下文 API 來處理用戶身份驗證。我有兩個使用該上下文的組件：dashboard和navBar。當我嘗試登錄和注銷時，我的navBar行為會根據我的不同而有所不同userContext，但我dashboard不會回應。它是否與結構有關，例如navBar直接“子級”到layout，但dashboard不是？我假設不是，畢竟，這就是為什么我使用contextAPIthen just pass 一個普通的道具。以下是代碼：//layout.jsimport React, { useContext, useState, createContext } from "react"import Navbar from "../components/navBar"import {monitorAuth} from "../firebase/firebaseService"export const UserStateContext = createContext(null)export const SetUserContext = createContext()const Layout = ({ children }) => {  const [user, setUser] = useState()  console.log(user)  monitorAuth(setUser)// everytime a layout component renders, it will grab a user if it is logged inthen setUser, then I will use it in the context  return (    <>      <UserStateContext.Provider value={user}>        <SetUserContext.Provider value={setUser}>          <div>            <SEO />            <Navbar />            <main>{children}</main>          </div>        </SetUserContext.Provider >      </UserStateContext.Provider>    </>  )}export default Layoutimport React, { useState, useContext } from "react"import AppBar from "@material-ui/core/AppBar"import { signOut } from "../firebase/firebaseService"import {UserStateContext} from "./layout"export default function NavBar() {  const user = useContext(UserStateContext)  console.log(user) // when I log in/ log out, it will console.log the right user status, user/null  const renderMenu = () => {    return (    <>      {user? (      <>      <Button onClick={signOut}>Sign Out</Button>      <Button>My profile</Button>       </>)     :<Button>Sign In</Button> }    </>    )  }  return (    <AppBar position="static" className={classes.root}>        ...        {renderMenu()}        ...  </AppBar>  )}