javascript - How to use Context API in React Navigation 5 - Stack Overflow

admin管理员组

文章数量:1425214

I am working in React Native with Hooks. In that I am using Context API to separate the context object. I am getting the error as "TypeError: undefined is not an object (evaluating '_useContext.isLoading').

My code is below. Please provide the solution to resolve this issue.

createDataContext.js

import React, { useReducer } from "react";

export default (reducer, actions, defaultValue) => {
  const Context = React.createContext();

  const Provider = ({ children }) => {
    const [state, dispatch] = useReducer(reducer, defaultValue);

    const boundActions = {};
    for (let key in actions) {
      boundActions[key] = actions[key](dispatch);
    }

    return (
      <Context.Provider value={{ state, ...boundActions }}>
        {children}
      </Context.Provider>
    );
  };

  return { Context, Provider };
};

AuthContext.js

import createDataContext from "./createDataContext";

const authReducer = (state, action) => {
  switch (action.type) {
    case "RESTORE_TOKEN":
      return { ...state, isLoading: false, userToken: action.payload };
    case "SIGN_IN":
    case "SIGN_UP":
      return { ...state, isSignout: false, userToken: action.payload };
    case "SIGN_OUT":
      return { ...state, isSignout: true, userToken: null };
    default:
      return state;
  }
};

const restoreToken = (dispatch) => (userToken) => {
  dispatch({ type: "RESTORE_TOKEN", payload: userToken });
};

const signIn = (dispatch) => () => {
  dispatch({ type: "SIGN_IN", payload: "dummy-auth-token" });
};

const signUp = (dispatch) => () => {
  dispatch({ type: "SIGN_UP", payload: "dummy-auth-token" });
};

const signOut = (dispatch) => () => {
  dispatch({ type: "SIGN_OUT" });
};

export const { Context, Provider } = createDataContext(
  authReducer,
  { restoreToken, signIn, signUp, signOut },
  { isLoading: true, isSignout: false, userToken: null }
);

App.js

import React, { useEffect, useContext } from "react";
import { AsyncStorage } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

import HomeScreen from "./src/screens/HomeScreen";
import SettingsScreen from "./src/screens/SettingsScreen";
import SigninScreen from "./src/screens/SigninScreen";
import SignupScreen from "./src/screens/SignupScreen";
import WeleScreen from "./src/screens/WeleScreen";

import { navigationRef } from "./src/navigationRef";

import { Context as AuthContext } from "./src/context/AuthContext";
import { Provider as AuthProvider } from "./src/context/AuthContext";

const SplashStack = createStackNavigator();
const SplashStackScreen = () => (
  <SplashStack.Navigator>
    <SplashStack.Screen name="Wele" ponent={WeleScreen} />
  </SplashStack.Navigator>
);

const AuthStack = createStackNavigator();
const AuthStackScreen = () => (
  <AuthStack.Navigator>
    <AuthStack.Screen
      name="Signin"
      ponent={SigninScreen}
      options={{ headerShown: false }}
    />
    <AuthStack.Screen
      name="Signup"
      ponent={SignupScreen}
      options={{ headerShown: false }}
    />
  </AuthStack.Navigator>
);

const HomeStack = createStackNavigator();
const HomeStackScreen = () => (
  <HomeStack.Navigator>
    <HomeStack.Screen name="Home" ponent={HomeScreen} />
  </HomeStack.Navigator>
);

const SettingsStack = createStackNavigator();
const SettingsStackScreen = () => (
  <SettingsStack.Navigator>
    <SettingsStack.Screen name="Search" ponent={SettingsScreen} />
  </SettingsStack.Navigator>
);

const Tabs = createBottomTabNavigator();
const TabsScreen = () => (
  <Tabs.Navigator>
    <Tabs.Screen name="Home" ponent={HomeStackScreen} />
    <Tabs.Screen name="Settings" ponent={SettingsStackScreen} />
  </Tabs.Navigator>
);

const RootStack = createStackNavigator();
const RootStackScreen = () => (
  <RootStack.Navigator headerMode="none">
    <RootStack.Screen
      name="App"
      ponent={AuthStackScreen}
      options={{
        animationEnabled: false,
      }}
    />
  </RootStack.Navigator>
);

export default () => {
  const { isLoading, userToken, restoreToken } = useContext(AuthContext);

  useEffect(() => {
    const bootstrapAync = async () => {
      let userToken;

      try {
        userToken = await AsyncStorage.getItem("userToken");
      } catch (e) {
        console.log(e);
      }

      restoreToken(userToken);
    };

    bootstrapAync();
  }, []);

  return (
    <AuthProvider>
      <NavigationContainer ref={navigationRef}>
        {isLoading ? (
          <SplashStackScreen />
        ) : userToken === null ? (
          <RootStackScreen />
        ) : (
          <TabsScreen />
        )}
      </NavigationContainer>
    </AuthProvider>
  );
};

I am working in React Native with Hooks. In that I am using Context API to separate the context object. I am getting the error as "TypeError: undefined is not an object (evaluating '_useContext.isLoading').

My code is below. Please provide the solution to resolve this issue.

createDataContext.js

import React, { useReducer } from "react";

export default (reducer, actions, defaultValue) => {
  const Context = React.createContext();

  const Provider = ({ children }) => {
    const [state, dispatch] = useReducer(reducer, defaultValue);

    const boundActions = {};
    for (let key in actions) {
      boundActions[key] = actions[key](dispatch);
    }

    return (
      <Context.Provider value={{ state, ...boundActions }}>
        {children}
      </Context.Provider>
    );
  };

  return { Context, Provider };
};

AuthContext.js

import createDataContext from "./createDataContext";

const authReducer = (state, action) => {
  switch (action.type) {
    case "RESTORE_TOKEN":
      return { ...state, isLoading: false, userToken: action.payload };
    case "SIGN_IN":
    case "SIGN_UP":
      return { ...state, isSignout: false, userToken: action.payload };
    case "SIGN_OUT":
      return { ...state, isSignout: true, userToken: null };
    default:
      return state;
  }
};

const restoreToken = (dispatch) => (userToken) => {
  dispatch({ type: "RESTORE_TOKEN", payload: userToken });
};

const signIn = (dispatch) => () => {
  dispatch({ type: "SIGN_IN", payload: "dummy-auth-token" });
};

const signUp = (dispatch) => () => {
  dispatch({ type: "SIGN_UP", payload: "dummy-auth-token" });
};

const signOut = (dispatch) => () => {
  dispatch({ type: "SIGN_OUT" });
};

export const { Context, Provider } = createDataContext(
  authReducer,
  { restoreToken, signIn, signUp, signOut },
  { isLoading: true, isSignout: false, userToken: null }
);

App.js

import React, { useEffect, useContext } from "react";
import { AsyncStorage } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

import HomeScreen from "./src/screens/HomeScreen";
import SettingsScreen from "./src/screens/SettingsScreen";
import SigninScreen from "./src/screens/SigninScreen";
import SignupScreen from "./src/screens/SignupScreen";
import WeleScreen from "./src/screens/WeleScreen";

import { navigationRef } from "./src/navigationRef";

import { Context as AuthContext } from "./src/context/AuthContext";
import { Provider as AuthProvider } from "./src/context/AuthContext";

const SplashStack = createStackNavigator();
const SplashStackScreen = () => (
  <SplashStack.Navigator>
    <SplashStack.Screen name="Wele" ponent={WeleScreen} />
  </SplashStack.Navigator>
);

const AuthStack = createStackNavigator();
const AuthStackScreen = () => (
  <AuthStack.Navigator>
    <AuthStack.Screen
      name="Signin"
      ponent={SigninScreen}
      options={{ headerShown: false }}
    />
    <AuthStack.Screen
      name="Signup"
      ponent={SignupScreen}
      options={{ headerShown: false }}
    />
  </AuthStack.Navigator>
);

const HomeStack = createStackNavigator();
const HomeStackScreen = () => (
  <HomeStack.Navigator>
    <HomeStack.Screen name="Home" ponent={HomeScreen} />
  </HomeStack.Navigator>
);

const SettingsStack = createStackNavigator();
const SettingsStackScreen = () => (
  <SettingsStack.Navigator>
    <SettingsStack.Screen name="Search" ponent={SettingsScreen} />
  </SettingsStack.Navigator>
);

const Tabs = createBottomTabNavigator();
const TabsScreen = () => (
  <Tabs.Navigator>
    <Tabs.Screen name="Home" ponent={HomeStackScreen} />
    <Tabs.Screen name="Settings" ponent={SettingsStackScreen} />
  </Tabs.Navigator>
);

const RootStack = createStackNavigator();
const RootStackScreen = () => (
  <RootStack.Navigator headerMode="none">
    <RootStack.Screen
      name="App"
      ponent={AuthStackScreen}
      options={{
        animationEnabled: false,
      }}
    />
  </RootStack.Navigator>
);

export default () => {
  const { isLoading, userToken, restoreToken } = useContext(AuthContext);

  useEffect(() => {
    const bootstrapAync = async () => {
      let userToken;

      try {
        userToken = await AsyncStorage.getItem("userToken");
      } catch (e) {
        console.log(e);
      }

      restoreToken(userToken);
    };

    bootstrapAync();
  }, []);

  return (
    <AuthProvider>
      <NavigationContainer ref={navigationRef}>
        {isLoading ? (
          <SplashStackScreen />
        ) : userToken === null ? (
          <RootStackScreen />
        ) : (
          <TabsScreen />
        )}
      </NavigationContainer>
    </AuthProvider>
  );
};

• javascript
• react-native

Share Improve this question Follow edited Apr 26, 2021 at 22:09 Alex Wayne 188k5252 gold badges328328 silver badges360360 bronze badges asked Jun 7, 2020 at 8:47 Philip JebarajPhilip Jebaraj 20322 gold badges44 silver badges88 bronze badges 4

• It seems to me that tour contexte and proviseur are created separatly. Have you tried to import them in a single import ? – Raphael Pr Commented Jun 7, 2020 at 8:55
• It's not working. – Philip Jebaraj Commented Jun 7, 2020 at 15:44
• maybe providing a default value for your context will help. – Raphael Pr Commented Jun 9, 2020 at 15:37
• I split the stack navigators into multiple file and I use the context in the ponent. Since the default App is not the children of Providers. So it always be undefined. – Philip Jebaraj Commented Jun 13, 2020 at 3:27

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

you can try this

function App () {
  const { isLoading, userToken, restoreToken } = useContext(AuthContext);

  useEffect(() => {
    const bootstrapAync = async () => {
      let userToken;

      try {
        userToken = await AsyncStorage.getItem("userToken");
      } catch (e) {
        console.log(e);
      }

      restoreToken(userToken);
    };

    bootstrapAync();
  }, []);

  return (
      <NavigationContainer ref={navigationRef}>
        {isLoading ? (
          <SplashStackScreen />
        ) : userToken === null ? (
          <RootStackScreen />
        ) : (
          <TabsScreen />
        )}
      </NavigationContainer>
  );
};
export default () => {
  return (
    <AuthProvider>
      <App />
    </AuthProvider>
  );
};

本文标签： javascriptHow to use Context API in React Navigation 5Stack Overflow