React Native登录报错Possible Unhandled Promise Rejection求助

问题现象 #

开发React Native注册登录应用时，登录页面无法完成登录，弹出“Login FAILED”提示，控制台输出错误：

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

注册时存储的数据与登录输入完全一致，但登录始终失败。

相关代码 #

SignInScreen组件 #

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;

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}

问题分析与解决方案 #

1. 核心错误原因：UserData可能为undefined #

getDataJSON函数在以下场景不会返回有效值：

• 当AsyncStorage中没有对应key的数据时，仅弹出alert但未返回任何值，此时UserData为undefined
• 当捕获到异常时，仅弹出alert也未返回值，同样导致UserData为undefined

直接访问undefined.password就会触发控制台的TypeError。

2. 次要问题：字段大小写不匹配（可能存在） #

组件中密码状态变量是Password（首字母大写），而判断时用的是UserData.password（全小写）。需要确认注册时存储的用户对象中密码字段的键名是否为password，如果注册时存的是Password，这里的判断就会不成立。

修复步骤 #

步骤1：完善getDataJSON的返回逻辑

确保函数在所有分支都有返回值，避免undefined：

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");
        return null; // 添加返回值
    }
 }catch(error){
    alert(error);
    return null; // 添加返回值
 }
};

步骤2：在登录逻辑中先判断UserData是否有效

修改登录按钮的onPress逻辑，先检查UserData是否存在，再进行密码比对：

async function (){
   // 先校验输入合法性
   if(!Email.trim() || !Password.trim()){
       alert('请输入邮箱和密码');
       return;
   }
   let UserData = await getDataJSON(Email);
   // 判断UserData是否存在
   if(!UserData){
       alert('用户不存在');
       return;
   }
   // 确认密码字段匹配，根据实际注册时的字段调整
   if(UserData.password === Password){
    auth.SetIsLoggedIn(true);
    auth.setCurrentUser(UserData);
   }else{
    alert('Login failed');
    console.log(UserData);
   }
}

步骤3：验证注册时的字段一致性

检查注册页面调用storeDataJson时存储的用户对象结构，确保密码字段的键名与登录时判断的一致。例如注册时的代码应类似：

// 注册时存储用户数据示例
storeDataJson(userEmail, {
    email: userEmail,
    password: userPassword, // 确保这里的键名是password（和登录判断一致）
    // 其他用户字段
});

内容的提问来源于stack exchange，提问作者Nazmul Hassan