React Native使用AsyncStorage存取数据返回Promise对象问题求助

云上老周

2026-9-23

问题根因与修复方案

1. 存储逻辑错误（数据根本没写入）

你当前Form组件的onSubmit属性使用了逗号表达式{storeData, handleSubmit}，这种写法只会执行最后一个handleSubmit方法，storeData完全没有被调用，邮箱数据没有被存入AsyncStorage。
修复代码：

// 新增统一提交处理函数
const handleFormSubmit = async (values) => {
  // 先存储邮箱
  await storeData(values.email);
  // 执行原有登录提交逻辑
  handleSubmit(values);
}

// 修改Form组件的onSubmit属性
<Form
  initialValues={{ email: "", password: "" }}
  onSubmit={handleFormSubmit}
  validationSchema={validationSchema}
>
{/* 其余原有内容保持不变 */}
</Form>

2. 读取逻辑错误（未正确获取异步返回值）

getData是async异步函数，直接调用异步函数返回的是Promise实例，必须通过await或者.then才能拿到内部返回的查询结果，这也是你控制台打印出Promise结构体的直接原因。
在React组件中需要配合useState+useEffect处理异步读取逻辑，修复代码：

import { useState, useEffect } from 'react';

const getData = async () => {
  try {
    const value = await AsyncStorage.getItem('loginEmail')
    return value ?? '';
  } catch(e) {
    console.log(e)
    return '';
  }
}

function AccountScreen({ navigation }) {
  const { user, logOut } = useAuth();
  // 声明state存储读取到的邮箱
  const [emailInfo, setEmailInfo] = useState('');

  useEffect(() => {
    // 组件挂载时读取邮箱
    const loadEmail = async () => {
      const email = await getData();
      setEmailInfo(email);
      console.log(email); // 此处可打印正确的邮箱值
    }
    loadEmail();
  }, []);

  // 后续业务逻辑直接使用emailInfo变量即可
}