反应上下文返回未定义

Question

I want to use context in React to pass authentication information to child components. My context provider is in a file named AuthContext.js :

import React, { Component, createContext } from 'react';

export const AuthContext = createContext();

class AuthContextProvider extends Component {
    state = {
        isAuthenticated: false
    };
    toggleAuth = () => {
        this.setState({ isAuthenticated: !this.state.isAuthenticated });
    };
    render() {
        return (
            <AuthContext.Provider value={{...this.state, toggleAuth: this.toggleAuth}}>
                {this.props.children}
            </AuthContext.Provider>
        );
    }
}

export default AuthContextProvider;

But when I'm accesing the context from the child components, it returns undefined

import { AuthContext } from "../contexts/AuthContext";

export default function ButtonAppBar() {
    return(
        <AuthContext.Consumer>{(authContext) => {
            console.log(authContext);
        }}</AuthContext.Consumer>
    );
}

After checking the React Developer Tools, I came to see that ButtonAppBar is not inside AuthContextProvider . Imports are correct. Any reason for this apart from import errors?

React version: 16.9.0

Answer 1

If you take a look at this working codesandbox you will see that your code is correct and should be working if you did everything all right.

Reasons that can make it not work

• Maybe you are importing it wrong? Please check how you import it.
• Maybe ButtonAppBar isn't inside AuthContextProvider .

For the context to work, the consumer needs to be inside of the provider.

This will work

  <AuthContextProvider>
    <ButtonAppBar /> {// consumer inside the provider }
  </AuthContextProvider>

This will not work

  <AuthContextProvider>
      ...
  </AuthContextProvider>
  <ButtonAppBar /> {// consumer outside the provider }

In the screenshot from the question, you don't have AuthContextProvider wrapping the routes, so you will never be able to get the context.

You didn't provided the code correctly but I'm guessing that what you need to do is

<App>
    <AuthContextProvider> {// AuthContextProvider wrapping routes so you can get the context}
        <BrowserRouter>
            ...
        </BrowserRouter>
    </AuthContextProvider>
</App>

Answer 2

Closures my friend. Your child component is executing an anónimo us function and that callback is been executed by the browser, if you console.log this you'll see that this is window and as you can imagine window does not have that function