App.js 中的 Firebase useAuth() 上下文未定义？

Question

我有一个 AuthProvider 和 useAuth 方法，returns useContext(AuthContext) 在我的 App.js 根文件中，但是，如果我 console.log return 的值App.js 中的 useAuth() 是未定义的，为什么？？在 Loginpage 等任何其他子组件中，都会显示一个 authContext..

我的App.js:

import { AuthProvider, useAuth } from './providers/AuthProvider'
function App() {
    const auth = useAuth()
    console.log({ auth }) //undefined??

AuthProvider.js:

import React, { useContext, useState, useEffect } from 'react'
import { app, auth, firestore, storage } from '../firebase'

const AuthContext = React.createContext()

export function useAuth() {
    return useContext(AuthContext)
}
export function AuthProvider({ children }) {
    const [currentUser, setCurrentUser] = useState(undefined)
    const [loginError, setLoginError] = useState(null)

    const login = async (email, password) => {
        try {
            return auth.signInWithEmailAndPassword(email, password)
        } catch (error) {
            setLoginError(error)
        }
    }

    

    const logout = () => auth.signOut()

    useEffect(() => {
        const unsubscribe = auth.onAuthStateChanged(user => {
            setCurrentUser(user)
        })
        return unsubscribe
    }, [])

    const value = {
        loginError,
        login,
        signup,
        logout,
        currentUser,
        app,
        firestore,
        storage,
        auth,
    }

    return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
}

Answer 1

由于您在 App 的同一个文件中导入 AuthProvider，这表明您没有正确使用上下文 API。

上下文值可用于上下文消费者。

Context-Consumer 是 Context-Provider 的子项，因此您的 App 组件必须是 <AuthContext.Provider> 的子项：

<AuthProvider>
  <App />
</AuthProvider>

App.js 中的 Firebase useAuth() 上下文未定义？

Firebase useAuth() context in App.js is undefined?

javascript

authentication

reactjs

google-cloud-firestore

use-context