React context undefined

Question

У меня есть базовая c форма аутентификации, которая работает, когда у меня есть весь код в файле App. js. Однако, когда я пытаюсь преобразовать страницы в отдельные файлы, контекст выдает исключение из-за того, что он пуст.

Приложение. js

---

import 'react-native-gesture-handler';

import * as React from 'react';
import { Button, Text, TextInput, View, StyleSheet } from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import AuthContext from './src/utils/AuthContext';
import HomeScreen from './src/components/HomeScreen';
import SignInScreen from './src/components/SignInScreen';
import SplashScreen from './src/components/SplashScreen';

const Stack = createStackNavigator();

export default function App() {
  const [state, dispatch] = React.useReducer(
    (prevState, action) => {
      switch (action.type) {
        case 'RESTORE_TOKEN':
          return {
            ...prevState,
            userToken: action.token,
            isLoading: false,
          };
        case 'SIGN_IN':
          return {
            ...prevState,
            isSignout: false,
            userToken: action.token,
          };
        case 'SIGN_OUT':
          return {
            ...prevState,
            isSignout: true,
            userToken: null,
          };
      }
    },
    {
      isLoading: true,
      isSignout: false,
      userToken: null,
    }
  );

  React.useEffect(() => {
    // Fetch the token from storage then navigate to our appropriate place
    const bootstrapAsync = async () => {
      let userToken;

      try {
        userToken = await AsyncStorage.getItem('userToken');
      } catch (e) {
        // Restoring token failed
        console.log("Restoring token failed" + e);
      }
        dispatch({ type: 'RESTORE_TOKEN', token: userToken });
    };
    bootstrapAsync();
  }, []);

  const authContext = React.useMemo(
    () => ({
      signIn: async data => {
        dispatch({ type: 'SIGN_IN', token: 'dummy-auth-token' });
      },
      signUp: async data => {
        dispatch({ type: 'TO_SIGNUP_PAGE' });
       },
      signOut: () => 
        dispatch({ type: 'SIGN_OUT' }),
    }),
    []
  );

  return (
    <AuthContext.Provider value={authContext}>
      <NavigationContainer>
        <Stack.Navigator>
          {state.isLoading ? (
            // We haven't finished checking for the token yet
            <Stack.Screen name="Splash" component={SplashScreen} />
          ) : state.userToken == null ? (
            // No token found, user isn't signed in
            <Stack.Screen name="SignIn" component={SignInScreen} options={{ title: 'Sign in', animationTypeForReplace: state.isSignout ? 'pop' : 'push',}} />
            ) : (
                // User is signed in
                <Stack.Screen name="Home" component={HomeScreen} />
              )}
        </Stack.Navigator>
      </NavigationContainer>
    </AuthContext.Provider>
  );
}

AuthContext. js

---

import { createContext } from 'react';

const AuthContext = createContext();

export default AuthContext;

HomeScreen. js

---

import React, { useContext } from 'react';
import { View, Text, TextInput, Button } from 'react-native';

import AuthContext from '../utils/AuthContext';

const HomeScreen = () => {
    const { signOut } = useContext(AuthContext);

    return (
      <AuthContext>
        <Text>Signed in!</Text>
        <Button title="Sign out" onPress={signOut} />
      </AuthContext>
    );
  }

export default HomeScreen;

Ошибка:

---

Я потратил на это много часов и просмотрел бесчисленное количество руководств, хоть убей, я не могу понять, что мне не хватает ...

Answer 1

Вы не экспортируете контекст. Ваш файл App. js экспортирует компонент App, но вы пытаетесь получить доступ к AuthContext из этого файла.

Лучший подход - поместить контекст в отдельный файл и импортировать его в оба App. js и HomeScreen. js

Ваш файл контекста должен выглядеть следующим образом

import { createContext } from 'react';

const AppContext = createContext();

export default AppContext;

И вы можете импортировать в другие файлы, как показано ниже

import AppContext from './AppContext';