React-Native - TypeError：未定义不是评估useContext的对象

Posted 2023-02-19

【中文标题】React-Native - TypeError：未定义不是评估useContext的对象

【英文标题】：React-Native - TypeError: undefined is not an object evaluating useContext

【发布时间】：2021-03-17 02:47:47

【问题描述】：

useContext 在这里可以正常工作，在屏幕更改之前的 console.log 可以按预期工作并为我提供用户对象（只需复制/粘贴相关信息以节省您的时间）

import React,  useContext, useState, useEffect  from "react";
import  AuthContext  from "./AuthProvider";

const Routes = () => 


const  user, setUser  = useContext(AuthContext);
  const [initializing, setInitializing] = useState(true);

  const onAuthStateChanged = (user) => 
    setUser(user);
    if (initializing) setInitializing(false);
  ;

  useEffect(() => 
    const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
    return subscriber; //unsub @ unmount
  , []);

  if (initializing) 
    return null;
  
  // console.log(user) //we have access to the user obj here w/out issues
  return (
    <NavigationContainer>
      user  ? <AppStack /> : <AuthStack /> * we have access to the user obj here w/out issues *
    </NavigationContainer>
  );
;

假设用户 Obj 存在（至少在登录一次后才会出现），我们跳入 AppStack。然后一切都爆炸了。 （我复制/粘贴了唯一的相关信息以节省您的时间）

import React,  useContext, useState  from "react";
import AuthProvider from "./AuthProvider";


export default function AppStack( navigation ) 
  const user = useContext(AuthProvider);
  
  console.log(user)



 return (
    <View style=styles.container>
      <Drawer.Navigator
        headerMode="none"
        drawerContent=(props) => <DrawerContent ...props />
      >
        <Drawer.Screen name="Please" component=MainTabScreen />
        <Drawer.Screen name="Help" component=MapScreen />
        <Drawer.Screen name="thisIssue" component=ProfileScreen />
        <Drawer.Screen name="isKillingMeSlowly" component=MainTabScreen />
      </Drawer.Navigator>
    </View>
  );
  // 


stylesheet.create blahblahblah

错误是由这一行引起的---> const user = useContext(AuthProvider); 这是错误：

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

为了修复此错误，我进行了更改：

remove  from AuthContext import on both Routes && AppStack
Add  to AuthContext import on both Routes && AppStack
remove  from user in AppStack
re-install packages
clean npm cache
re-clone the repo
cry

我看到一篇帖子暗示这可能是 React-Native 的问题，但它与我使用的 React-Native 版本不同。

这是我的（巨大的）package.json

  "main": "node_modules/expo/AppEntry.js",
  "scripts": 
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "test": "jest --watchAll"
  ,
  "jest": 
    "preset": "jest-expo"
  ,
  "dependencies": 
    "@ant-design/icons": "^4.2.1",
    "@expo/vector-icons": "^10.0.0",
    "@mdi/js": "^5.3.45",
    "@mdi/react": "^1.4.0",
    "@react-native-community/async-storage": "~1.12.0",
    "@react-native-community/masked-view": "0.1.10",
    "@react-native-firebase/app": "^10.1.0",
    "@react-native-firebase/auth": "^9.2.3",
    "@react-native-firebase/database": "^7.2.7",
    "@react-navigation/bottom-tabs": "^5.3.1",
    "@react-navigation/drawer": "^5.8.5",
    "@react-navigation/material-bottom-tabs": "^5.2.15",
    "@react-navigation/native": "^5.7.0",
    "@react-navigation/stack": "^5.2.16",
    "expo": "^39.0.5",
    "expo-asset": "~8.2.0",
    "expo-constants": "~9.2.0",
    "expo-facebook": "~9.0.0",
    "expo-font": "~8.3.0",
    "expo-linear-gradient": "~8.3.0",
    "expo-linking": "^1.0.1",
    "expo-splash-screen": "~0.6.2",
    "expo-status-bar": "~1.0.2",
    "expo-web-browser": "~8.5.0",
    "firebase": "7.9.0",
    "npm": "^6.14.8",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz",
    "react-native-animatable": "^1.3.3",
    "react-native-appearance": "~0.3.3",
    "react-native-fontawesome": "^7.0.0",
    "react-native-gesture-handler": "~1.7.0",
    "react-native-ionicons": "^4.6.5",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-maps": "0.27.1",
    "react-native-onboarding-swiper": "^1.1.4",
    "react-native-paper": "^4.2.0",
    "react-native-reanimated": "~1.13.0",
    "react-native-safe-area-context": "3.1.4",
    "react-native-screens": "~2.10.1",
    "react-native-vector-icons": "^7.0.0",
    "react-native-web": "~0.13.7",
    "react-navigation": "^4.4.0",
    "rn-toggle-switch": "^1.0.2",
    "styled": "^1.0.0",
    "styled-components": "^5.2.0"
  ,
  "devDependencies": 
    "@babel/core": "^7.8.6",
    "babel-preset-expo": "^8.3.0",
    "jest-expo": "^39.0.0"
  ,
  "private": true

这是错误的屏幕截图：

【问题讨论】：

Welp，尽管检查了至少 10 次，但我错过了从 AuthProvider.js 导入 AuthProvider 而不是 AuthContext。

【参考方案1】：

尽管检查了至少 10 次，但我错过了从 AuthProvider.js 导入 AuthProvider 而不是 AuthContext。

修复：

original: import AuthProvider from "./AuthProvider";
corrected: import AuthContext from "./AuthProvider";