第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

為什么當(dāng)上下文值更新時(shí)我的上下文不更新?

為什么當(dāng)上下文值更新時(shí)我的上下文不更新?

慕桂英3389331 2022-12-22 13:02:38
所以我在我的 Gatsby 應(yīng)用程序(基本上是用 React 編寫的)中使用 React 的上下文 API 來處理用戶身份驗(yàn)證。我有兩個(gè)使用該上下文的組件:dashboard和navBar。當(dāng)我嘗試登錄和注銷時(shí),我的navBar行為會(huì)根據(jù)我的不同而有所不同userContext,但我dashboard不會(huì)回應(yīng)。它是否與結(jié)構(gòu)有關(guān),例如navBar直接“子級”到layout,但dashboard不是?我假設(shè)不是,畢竟,這就是為什么我使用contextAPIthen just pass 一個(gè)普通的道具。以下是代碼://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>  )}
查看完整描述

1 回答

?
眼眸繁星

TA貢獻(xiàn)1873條經(jīng)驗(yàn) 獲得超9個(gè)贊

它不起作用的原因是因?yàn)槟?lt;Dashboard>組件不是上下文提供程序的子項(xiàng)。如果你使用 React devtools,你會(huì)看到組件樹看起來像


<Dashboard>

  <Layout>

    <UserStateContext.Provider>

      <SetUserContext.Provider>

        ...

      </SetUserContext.Provider> 

    </UserStateContext.Provider> 

  </Layout>

</Dashboard>

當(dāng)上下文值發(fā)生變化時(shí),它會(huì)在其子樹中查找組件useContext。然而,Dashboard不是孩子,是父母!


如果你想遵循這種模式,一個(gè)解決方案可能是創(chuàng)建一個(gè)父組件Dashboard并將上下文放在那里。


查看完整回答
反對 回復(fù) 2022-12-22
  • 1 回答
  • 0 關(guān)注
  • 80 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號