Javascript 为什么我的上下文没有'；上下文值更新时是否更新？

因此，我在我的盖茨比应用程序（基本上是用React编写的）中使用React的上下文API来处理用户身份验证。我有两个组件使用该上下文：

dashboard

和

navBar

。当我尝试登录和注销时，我的

导航栏

将根据我的

用户上下文

表现不同，但我的

仪表板

不会响应。它是否与结构相关，例如

navBar

是

布局的直接“子项”

，而

仪表板

不是？我想不会，毕竟，这就是为什么我使用

contextAPI

然后只传递一个普通道具

代码如下：

//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

---

这意味着，起初，

用户

尚未设置，因此所有三个组件都将

用户

记录为

未定义

，但后来，

布局

检测到

用户

，然后对其进行更新，因此

导航栏

也知道，但

仪表板

不知道。是关于重新渲染的吗？谢谢

它不工作的原因是您的

组件不是上下文提供程序的子组件。如果使用React devtools，您将看到组件树如下所示

<Dashboard>
  <Layout>
    <UserStateContext.Provider>
      <SetUserContext.Provider>
        ...
      </SetUserContext.Provider> 
    </UserStateContext.Provider> 
  </Layout>
</Dashboard>

...

当上下文值更改时，它会在其子树中查找

useContext

的组件。然而，

Dashboard

不是孩子，而是家长

---

如果要遵循此模式，解决方案可能是创建

仪表板的父组件，并将上下文放在那里。
它不起作用的原因是您的
组件不是上下文提供程序的子组件。如果使用React devtools，您将看到组件树如下所示

<Dashboard>
  <Layout>
    <UserStateContext.Provider>
      <SetUserContext.Provider>
        ...
      </SetUserContext.Provider> 
    </UserStateContext.Provider> 
  </Layout>
</Dashboard>


...

当上下文值更改时，它会在其子树中查找
useContext
的组件。然而，
Dashboard
不是孩子，而是家长

如果要遵循此模式，解决方案可能是创建
仪表板的父组件
，并将上下文放在那里。
为什么要使用两个上下文？你可以把它们结合起来。另外，我从未见过你重复使用
SetUserContext
你需要调用
setUser
来触发一个renderI尝试将它们组合起来，它应该可以工作，如果你遵循：）你必须调用setter来更新你的上下文状态。@Stutje谢谢！我之所以使用两种不同的上下文，是因为它可以防止过多的重新渲染。但感谢您使用代码笔：）这只是代码的一部分，我会在其他地方使用SetUserContext，setUser在
monitorAuth
中用于设置用户的value@JULIENPICARD是的。这只是代码的一部分，我会在其他地方使用SetUserContext，而
setUser
在
monitorAuth
中用于设置用户的值为什么要使用两个上下文？你可以把它们结合起来。另外，我从未见过你重复使用
SetUserContext
你需要调用
setUser
来触发一个renderI尝试将它们组合起来，它应该可以工作，如果你遵循：）你必须调用setter来更新你的上下文状态。@Stutje谢谢！我之所以使用两种不同的上下文，是因为它可以防止过多的重新渲染。但感谢您使用代码笔：）这只是代码的一部分，我会在其他地方使用SetUserContext，setUser在
monitorAuth
中用于设置用户的value@JULIENPICARD是的。它只是代码的一部分，我会在其他地方使用SetUserContext，而
setUser
在
monitorAuth
中用于设置用户的值
within dashboard
dashboard.js:17 null
layout.js:15 undefined
navBar.jsx:54 undefined
layout.js:15 [user...]
navBar.jsx:54 [user...]
layout.js:15 [user...]


<Dashboard>
  <Layout>
    <UserStateContext.Provider>
      <SetUserContext.Provider>
        ...
      </SetUserContext.Provider> 
    </UserStateContext.Provider> 
  </Layout>
</Dashboard>