reactjs - 无法在上下文 Hook 中调用函数

Question

我目前正在尝试设置一个包含 react 上下文 API 的身份验证组件。
一切正常，除了我无法从上下文 Hook 调用方法并且我不知道出了什么问题。

// authContext.ts
export const AuthContext = createContext({
    authenticated: false,
    user: {
        role: ""
    },
    accessToken: "",
    initiateLogin: () => {},
    handleAuthentication: () => {},
    logout: () => {}
})

// Auth.tsx
const Auth: FunctionComponent = (props) => {
    const [authenticated, setAuthenticated] = useState(false)
    const [accessToken, setAccessToken] = useState('')
    const [user, setUser] = useState({ role: "user" })

    const auth = new auth0.WebAuth({
        domain: AUTH_CONFIG.domain,
        clientID: AUTH_CONFIG.clientId,
        redirectUri: AUTH_CONFIG.callbackUrl,
        audience: `https://${AUTH_CONFIG.domain}/userinfo`,
        responseType: "token id_token"
    })

    function initiateLogin () {
        auth.authorize()
    }

    function logout() {
        setAuthenticated(false)
        setUser({ role: "user" })
        setAccessToken('')
    }

    function handleAuthentication() {
        auth.parseHash((error, authResult) => {
            if (error) {
                console.log(error)
                return
            }

            if (authResult == null) {
                return
            }

            setSession(authResult.idTokenPayload)
        })
    }

    function setSession(data: any) {
        const user = {
            id: data.sub,
            email: data.email,
            role: data[AUTH_CONFIG.roleUrl]
        }
        setUser(user)
        setAccessToken(data.accessToken)
        setAuthenticated(true)
    }

    return (
        <AuthContext.Provider value={{authenticated, accessToken, user, initiateLogin, handleAuthentication, logout}}>
            <AbilityContext.Provider value={buildAbilityFor(user.role)}>
                {props.children}
            </AbilityContext.Provider>
        </AuthContext.Provider>
    )
}

export { Auth }

// Dashboard.tsx
function Dashboard() {

    const authentication = useContext(AuthContext)

    function login() {
        authentication.initiateLogin()
    }

    return (
        <Auth>
            <Switch>
                <Route exact path='/callback' component={Callback} />
            </Switch>

            <Button onClick={login}>Login</Button>
        </Auth>
    )
}

export { Dashboard }

我正在尝试调用 initiateLogin仪表板中的方法，并且该方法未从使用的上下文中调用。我究竟做错了什么？

Answer 1

为了使上下文在 Dashboard 中可用，您需要将提供程序包装在此组件周围。在您的示例中，您的提供程序位于 Auth 内。 ，所以需要换行Auth约Dashboard :

<Auth>
  <Dashboard />
</Auth>

此外，您刚刚声明了 login函数而不调用它。您还需要调用它，即在 useEffect 中，或单击按钮。