React-Native

Question

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

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。然后一切都爆炸了。（我copy/pasted唯一可以节省你时间的相关信息）

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

我看到 post 暗示这可能是 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
}

错误截图如下：

Answer 1

尽管至少检查了 10 次，但我错过了从 AuthProvider.js.

导入 AuthProvider 而不是 AuthContext 的信息

修复：

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

React-Native - TypeError: undefined is not an object evaluating useContext

React-Native - TypeError: undefined is not an object evaluating useContext

reactjs

firebase-authentication

expo

use-context