不能使用 React 上下文？

Question

My index.js has:

ReactDOM.render(
    <FirebaseContext.Provider value={new Firebase()}>
        <Suspense fallback="loading">
            <App/>
        </Suspense>
    </FirebaseContext.Provider>,
    document.getElementById('root')
);

Inside app.js I am trying to access the context:

export default function App(props) {
    console.log("app trying to use firebase");
    const {firebase} = useFirebase();
    return <div>{firebase && firebase.loggedIn()}</div>
}

FirebaseContext and Firebase class are defined like so:

export const FirebaseContext = createContext({});
export const useFirebase = () => useContext(FirebaseContext);

export default class Firebase {
    constructor() {
        console.log("firebase intialized")
        app.initializeApp(firebaseConfig);
        this.auth = app.auth();
    }

    loggedIn = () => {
        return !!this.auth.currentUser;
    }
}

FirebaseContext seems to be initialized properly since I get the output inside the console, but I keep getting Error: Cannot read property 'loggedIn' of undefined. Why can't I use my context?

Answer 1

Have you tried your code after removing the destructuring like so

const {firebase} = useFirebase(); =>>> const firebase = useFirebase();

If the issue persists, then try to bind the firebase variable given that loggedIn is resulting in undefined within a class-based component.

Answer 2

Context.Provider

<MyContext.Provider value={/* some value */}>

Every Context object comes with a Provider React component that allows consuming components to subscribe to context changes.

The Provider component accepts a value prop to be passed to consuming components that are descendants of this Provider. One Provider can be connected to many consumers. Providers can be nested to override values deeper within the tree.