Actualmente estoy trabajando en una aplicación React Native que usa AsyncStorage para almacenar tokens de autenticación para los usuarios. Tengo un contexto para hacer esto:

 import React, { useReducer, createContext } from "react"; import AsyncStorage from "@react-native-async-storage/async-storage"; import jwtDecode from "jwt-decode"; const initialState = { user: null, }; AsyncStorage.getItem("user").then((res) => { if (res !== null || res !== undefined) { initialState.user = jwtDecode(res); } else return; }); const AuthContext = createContext({ user: null, login: (userData) => {}, logout: () => {}, }); function authReducer(state, action) { switch (action.type) { case "LOGIN": return { ...state, user: action.payload, }; case "LOGOUT": return { ...state, user: null, }; default: return state; } } function AuthProvider(props) { const [state, dispatch] = useReducer(authReducer, initialState); function login(userData) { AsyncStorage.setItem("user", userData.token); dispatch({ type: "LOGIN", payload: userData, }); } function logout() { AsyncStorage.clear(); dispatch({ type: "LOGOUT" }); } return ( <AuthContext.Provider value={{ user: state.user, login, logout }} {...props} /> ); } export { AuthContext, AuthProvider };

Mi función de inicio de sesión se ve así:

 const [login, { error: loginError }] = useMutation(LOGIN_USER, { update(_, { data: { login: userData } }) { context.login(userData); colorContext.setColor( String( _palette__colors[ Math.ceil(Math.random() * _palette__colors.length - 1) ] ) ); navigation.reset({ index: 0, routes: [{ name: "BottomTab" }], }); }, variables: { email, password, }, });

Sin embargo, cuando intento iniciar sesión, la aplicación regresa y el error dice que mi objeto "usuario" no está definido. Cuando reinicio la aplicación, todo funciona bien, por lo que parece que AsyncStorage necesita recargarse manualmente para cargar los datos o algo así. Alguien sabe como solucionar este error?