React-Native TypeError: undefined is not an object (evalating '_useContext.user') FireBase

Question

对于 firebase 身份验证操作，我设置了我共享的代码的 AuthProvider.js 结构，并尝试在 Router.js 中使用它，但我收到此错误。我该如何解决？ 我猜'从'react'导入React，{useState，useEffect，useContext}；'我在这里遇到错误

Error:TypeError: undefined is not an object (evalating '_useContext.user')

我的路由器：

import { AuthContext } from './Pages/AuthProvider/AuthProvider';
const Router = () => {
    const [isFirstLaunch,setIsFirstLaunch] = useState(null);
    const {user, setUser} = useContext(AuthContext);

    const {initializing,setInitializing} = useState(true);

    useEffect(()=>{
      AsyncStorage.getItem('alreadyLaunched').then(value=>{
        if(value== null){
          AsyncStorage.setItem('alreadyLaunched','true');
          setIsFirstLaunch(true);
        }else{
          setIsFirstLaunch(false);
        }
      });
    },[])
    if(isFirstLaunch == null){
      return null;
    }
    else if(isFirstLaunch== true){
      return (
        <NavigationContainer>
          <Stack.Navigator 
            screenOptions={{
              headerShown:false
            }}
          >
            <Stack.Screen name='OnBoarding' component={OnBoardingPage}/>
            <Stack.Screen name='AuthStack' component={AuthStack}/>
            <Stack.Screen name='HomeStack' component={HomeStack}/>
            <FlashMessage position="top" />
          </Stack.Navigator>  
        </NavigationContainer>
      );
    }
    else{
      return(
        <NavigationContainer>
          <Stack.Navigator 
              screenOptions={{
                headerShown:false
              }}
          >
            <Stack.Screen name='AuthStack' component={AuthStack}/>
            <Stack.Screen name='HomeStack' component={HomeStack}/> 
          </Stack.Navigator>
          <FlashMessage position="top" />
        </NavigationContainer>
      )
    }
  }

我的 AuthProvider.js

import React, {createContext, useState} from 'react';
import auth from '@react-native-firebase/auth';


export const AuthContext = createContext();

export const AuthProvider = ({children}) => {
  const [user, setUser] = useState(null);

  return (
    <AuthContext.Provider
      value={{
        user,
        setUser,
        login: async (email, password) => {
          try {
            await auth().signInWithEmailAndPassword(email, password);
          } catch (e) {
            console.log(e);
          }
        },
        register: async (email, password) => {
          try {
            await auth().createUserWithEmailAndPassword(email, password)
          } catch (e) {
            console.log(e);
          }
        },
        logout: async () => {
          try {
            await auth().signOut();
          } catch (e) {
            console.log(e);
          }
        },
      }}>
      {children}
    </AuthContext.Provider>
  );
};

Answer 1

我们应该使用这种类型：

<AuthProvider>
  <Router/>
</AuthProvider>