为什么当上下文值更新时我的上下文不更新？

Question

所以我在我的 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>  )}

Answer 1

它不起作用的原因是因为您的<Dashboard>组件不是上下文提供程序的子项。如果你使用 React devtools，你会看到组件树看起来像

<Dashboard>

  <Layout>

    <UserStateContext.Provider>

      <SetUserContext.Provider>

        ...

      </SetUserContext.Provider> 

    </UserStateContext.Provider> 

  </Layout>

</Dashboard>

当上下文值发生变化时，它会在其子树中查找组件useContext。然而，Dashboard不是孩子，是父母！

如果你想遵循这种模式，一个解决方案可能是创建一个父组件Dashboard并将上下文放在那里。