React Native useContext hook возвращает Undefined - PullRequest
Новая
       10

React Native useContext hook возвращает Undefined

0 голосов
/ 23 апреля 2020

Я новичок в реагировании на нативный и контекстный Api, поэтому любая помощь будет очень признательна. Когда я запускаю приложение, я вижу, что undefined не является ошибкой объекта _useContext.appUser. Ниже мой код. Приложение. js

import { AsyncStorage } from 'react-native';
import { NavigationContainer } from '@react-navigation/native'
import AuthStackNavigator from './src/navigators/AuthStackNavigator'
import { LightTheme } from './src/themes/light'
import UserTabsNavigator from './src/navigators/UserTabsNavigator'
import AuthProvider from './src/auth/AuthProvider'
import { AuthContext } from './src/auth/AuthProvider';




export default function App() {

  const [loggedIn, setLoggedIn] = useState(false);
  const { appUser } = useContext(AuthContext);

  console.log('context object' + appUser);

  useEffect(() => {
    AsyncStorage.getItem('user').then(userString => {
      if (userString) {
        setLoggedIn(true)
      }
    }).catch(error => {
      console.log(error);
    })
  })


  return (
    <AuthProvider>
      <NavigationContainer theme={LightTheme}>
        {loggedIn ? <UserTabsNavigator /> :
          <AuthStackNavigator />}

      </NavigationContainer>
    </AuthProvider>
  );

};

AuthProvider. js

import React, { useState, createContext } from 'react';
import { AsyncStorage } from 'react-native';


export const AuthContext = createContext();

const AuthProvider = ({ children }) => {
    const [user, setUser] = useState(null);

    const loginUser = () => {
        const fakeUser = { username: 'Test' }
        AsyncStorage.setItem('user', JSON.stringify(fakeUser));
        setUser(fakeUser);

    }

    const logoutUser = () => {
        AsyncStorage.removeItem('user');
        setUser(null);
    }


    return (
        <AuthContext.Provider value={{
            appUser: user,
            login: loginUser,
            logout: logoutUser

        }}>
            {children}
        </AuthContext.Provider>
    )
}

export default AuthProvider;

Буду очень признателен за любую помощь здесь. Я уже давно борюсь с этой проблемой. Я как бы застрял здесь.

...