慕桂英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并將上下文放在那里。
添加回答
舉報(bào)
0/150
提交
取消