React Native - TypeError：undefined 不是评估 _useContext 的对象

Question

So this is a bit of a weird case. My app works totally fine and context works fine as well. However; whenever I save my apiHelpers.js file (an object with various api calls) in debug mode, my app crashes.

Every save - regardless of if I changed something or not crashes the app. Just cmd + S on the file is making it crash. If it's just a weird debug mode - fine, I can put up with it. My concern is if it could be a symptom of a problem that could cause the app to crash in production.

The error:

TypeError: undefined is not an object (evaluating '_useContext2.getData')

This error is located at:
    in MyDashboard (at SceneView.js:9)
    in SceneView (at createTabNavigator.tsx:67)
    in RCTView (at ResourceSavingScene.tsx:37)
    in RCTView (at ResourceSavingScene.tsx:26)
    in ResourceSavingScene (at createBottomTabNavigator.tsx:157)
    in RCTView (at screens.native.js:101)
    in ScreenContainer (at createBottomTabNavigator.tsx:147)
    in RCTView (at createBottomTabNavigator.tsx:146)
    in TabNavigationView (at createTabNavigator.tsx:228)
    in NavigationView (at createNavigator.js:80)
    in Navigator (at SceneView.js:9)
    in SceneView (at StackViewLayout.tsx:900)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewCard.tsx:106)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at screens.native.js:71)
    in Screen (at StackViewCard.tsx:93)
    in Card (at createPointerEventsContainer.tsx:95)
    in Container (at StackViewLayout.tsx:975)
    in RCTView (at screens.native.js:101)
    in ScreenContainer (at StackViewLayout.tsx:384)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewLayout.tsx:374)
    in PanGestureHandler (at StackViewLayout.tsx:367)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.tsx:104)
    in RCTView (at Transitioner.tsx:267)
    in Transitioner (at StackView.tsx:41)
    in StackView (at createNavigator.js:80)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at SceneView.js:9)
    in SceneView (at SwitchView.js:12)
    in SwitchView (at createNavigator.js:80)
    in Navigator (at createAppContainer.js:430)
    in NavigationContainer (at App.js:52)
    in NavContainer (at App.js:130)
    in ToastProvider (at App.js:129)
    in AccountProvider (at App.js:128)
    in RCTView (at ActionSheet/index.ios.tsx:13)
    in ActionSheet (at ActionSheetProvider.tsx:30)
    in ActionSheetProvider (at App.js:127)
    in LoadingProvider (at App.js:126)
    in Provider (at App.js:125)
    in App
    in RCTView (at AppContainer.js:101)
    in RCTView (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:39)

MyDashboard
    MyDashboard.js:28:4
renderRoot
    [native code]:0
runRootCallback
    [native code]:0
unstable_runWithPriority
    scheduler.development.js:643:23
Component.prototype.setState
    react.development.js:325:31
NavigationContainer#dispatch
    createAppContainer.js:377:22
navigate
    navigationRef.js:9:24
<anonymous>
    AuthContext.js:207:4
tryCatch
    runtime.js:45:44
invoke
    runtime.js:271:30
tryCatch
    runtime.js:45:44
invoke
    runtime.js:135:28
Promise$argument_0
    runtime.js:170:17
tryCallTwo
    core.js:45:7
doResolve
    core.js:200:23
Promise
    core.js:66:12
Promise$argument_0
    runtime.js:169:27
enqueue
    runtime.js:192:38
exports.async
    runtime.js:216:8
<anonymous>
    AuthContext.js:203:2
getAuth.then$argument_0
    App.js:81:41
tryCallOne
    core.js:37:14
setImmediate$argument_0
    core.js:123:25
_callTimer
    JSTimers.js:146:14
_callImmediatesPass
    JSTimers.js:194:17
callImmediates
    JSTimers.js:458:30
callImmediates
    [native code]:0
flushedQueue
    [native code]:0
invokeCallbackAndReturnFlushedQueue
    [native code]:0

My imports:

import React, { useContext, useEffect, useState } from 'react';
import AccountContext from '../../context/AccountContext';
import LoadingContext from '../../context/LoadingContext';
import { Context as AuthContext } from '../../context/AuthContext';
import {
  StyleSheet,
  SafeAreaView,
  View,
  Text,
  TouchableOpacity,
  ScrollView,
  Image,
  Alert,
  Dimensions,
} from 'react-native';
import colors from '../../utils/colors';
import globalStyles from '../../utils/globalStyles';
import api from '../../api/apiHelpers';


const MyDashboard = ({ navigation }) => {
  const { showLoading } = useContext(LoadingContext);
  const { getData } = useContext(AccountContext);
  const { state } = useContext(AuthContext);

  return (
      <SafeAreaView style={styles.container}>
        <ScrollView
          contextContainerStyles={{ flexGrow: 1}}
          showsVerticalScrollIndicator={false}>
          <Text>
            MyDashboard
          </Text>
          <Text>
            Welcome, {getData.name}
          </Text>
        </ScrollView>
      </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default MyDashboard;

Answer 1

I had the same problem, two days ago. I tried to reinstall or update the libraries and update react, reading some similar problems I read something about a bug in the react version, and solved my problem, but after installing a new library, this problem came back and my application still has the same problem

Bug article: https://github.com/facebook/react/issues/14474

Answer 2

Try to check getData before or assign to empty object like this:

const MyDashboard = ({ navigation }) => {
  const { showLoading } = useContext(LoadingContext);
  const { getData } = useContext(AccountContext);
  const { state } = useContext(AuthContext);

  if(!getData) return null // <- check this

  return (
      <SafeAreaView style={styles.container}>
        <ScrollView
          contextContainerStyles={{ flexGrow: 1}}
          showsVerticalScrollIndicator={false}>
          <Text>
            MyDashboard
          </Text>
          <Text>
            Welcome, {getData.name}
          </Text>
        </ScrollView>
      </SafeAreaView>
  );
};

Hope it can help

Answer 3

请试试这个

import {AccountContext} from '../../context/AccountContext';

import {LoadingContext} from '../../context/LoadingContext';