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

Question

所以我在我的 Gatsby 应用程序（基本上是用 React 编写的）中使用 React 的上下文 API 来处理用户身份验证。我有两个使用该上下文的组件：dashboard和navBar。当我尝试登录和注销时，我的navBar行为会根据我的不同而有所不同userContext，但我dashboard不会回应。它是否与结构有关，例如navBar直接“子级”到layout，但dashboard不是？我假设不是，毕竟，这就是为什么我使用contextAPIthen just pass 一个普通的道具。

以下是代码：

//layout.js

import 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 Layout

import 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>&nbsp; <Layout>&nbsp; &nbsp; <UserStateContext.Provider>&nbsp; &nbsp; &nbsp; <SetUserContext.Provider>&nbsp; &nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; &nbsp; </SetUserContext.Provider>&nbsp;&nbsp; &nbsp; </UserStateContext.Provider>&nbsp;&nbsp; </Layout></Dashboard>当上下文值发生变化时，它会在其子树中查找组件useContext。然而，Dashboard不是孩子，是父母！如果你想遵循这种模式，一个解决方案可能是创建一个父组件Dashboard并将上下文放在那里。