Question 33827 in React native Question posted in
The official React Native documentation can be found here.

Possible Unhandled Promise Rejection react native error

I am making a react-native user registration and login app and getting the following error. How can I fix this? My codes store exactly the same data that I use for registration. And in the SIGN IN page, it refuses to log in and shows the (Login FAILED) error. And in the console, it prints the following error. Please help.

WARN: Possible Unhandled Promise Rejection
TypeError: undefined is not an object(evaluating ‘UserData.password’)

My Code

import React, { useState } from "react";
import {StyleSheet, View} from 'react-native';
import {Input, Button, Card, Tab} from '@rneui/themed';
import { FontAwesome } from '@expo/vector-icons';
import {AuthContext} from "../topuproviders/Authprovider";
import { getDataJSON } from "../functions/topuAsyncStorage";


const SignInScreen = (props) => {
const [Email, setEmail]         = useState("");
const [Password, setPassword]   = useState(""); 
 return (
     <AuthContext.Consumer>
       {(auth)=>(<View style ={styles.viewStyle}>
         <Card>
            <Card.Title>Welcome to Auth App!</Card.Title>
            <Card.Divider/>
                <Input 
                    placeholder='Email Address' 
                    leftIcon={<FontAwesome name="envelope" size={20} color="#4CAF50" />}
                    onChangeText={function(currentInput){
                        setEmail(currentInput)
                    }}
                />

                <Input 
                    placeholder='Password' 
                    secureTextEntry={true} 
                    leftIcon={<FontAwesome name="lock" size={24} color="#4CAF50" />}
                    onChangeText={function(currentInput){
                        setPassword(currentInput)
                    }}
                />

                <Button 
                    icon = {<FontAwesome name="arrow-circle-o-right" size={15} color="white" />}  
                    name ="login" 
                    type ="solid" 
                    title="Sign In" 
                    onPress={
                        async function (){
                           let UserData = await getDataJSON(Email);
                           if(UserData.password == Password){
                            auth.SetIsLoggedIn(true);
                            auth.setCurrentUser(UserData);
                           }else{
                            alert('Login failed');
                            console.log(UserData); /*** Prints exactly same data what i Input ***/
                           }
                        }
                    }
                />
            <Card.Divider/>
            
            <Button 
                name ="noaccount" 
                type ="clear" 
                title="Don't have account?"
                onPress={
                    function (){
                        props.navigation.navigate("SignUp")
                    }
                }
            />
         </Card>
         
     </View>)}
     </AuthContext.Consumer>    

   );
 }

 export default SignInScreen;

getdataJson/Asyncstorage

import AsyncStorage from '@react-native-async-storage/async-storage';

const storeData = async (key, value) => {
try {
    await AsyncStorage.setItem(key, value);
    alert("Data stored succefully");
}catch (error){
    alert(error);
 }
};

const storeDataJson = async (key, value) => {
try {
    const jsonValue = JSON.stringify(value);
    await AsyncStorage.setItem(key, jsonValue);
    alert("Data stored successfully")
 }catch(error){
    alert(error);
 }
};

const getData = async (key) => {
 try {
    let data = await AsyncStorage.getItem(key);
    if(data != null){
        return data;
    }else{
        alert("No Data with this key!");
    }
  }catch (error){
    alert(error);
  }
};

const getDataJSON = async (key) => {
try {
    let data = await AsyncStorage.getItem(key);
    if(data != null){
        const jsonData = JSON.parse(data);
        return jsonData;
    }else {
        alert("No data with this key");
    }
 }catch(error){
    alert(error);
    
 }
};

const removeData = async (key) => {
try {
    await AsyncStorage.removeItem(key);
    alert("Data removed Successfully");
 }catch (error){
    alert (error);
 }
};

export {storeData, storeDataJson, getData, getDataJSON, removeData}
Tags:

2

Answers


  1. 0

    You can wrap your function inside try-catch block to see the error.

    async function (){
         try {

          let UserData = await getDataJSON(Email);
          if(UserData.password == Password){
             auth.SetIsLoggedIn(true);
             auth.setCurrentUser(UserData);
          }else{
              alert('Login failed');
              console.log(UserData);
          }
   }
   catch(error){
     console.log(error)
   }
}

    getDataJson

    const getDataJSON = (key) => {
 return await AsyncStorage.getItem(key);
};

    Also, as far as i know, you cannot alert inside react-native. You need to import alert from ‘react-native’

    Official Docs

    import { Alert } from "react-native";

    Login or Signup to reply.
  2. 0

    Your getDataJSON() function does not return an object always. So you should first check if its value is true, an object, and have a "password" property. For doing so, access the password property with the question mark.

    let UserData = await getDataJSON(Email);
if(UserData?.password == Password){
...
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search