React Native中AsyncStorage.getItem使用async/await返回值异常问题

• 你定义了异步函数userdata后没有主动调用，直接打印userdata输出的是函数本身的定义（也就是你看到的babel转译后的_callee相关内容），根本没有触发内部的AsyncStorage读取逻辑。
• 即便调用了这个async函数，它的返回值是Promise对象，无法同步直接拿到内部包裹的存储值，必须通过await或者.then()接收最终的解析结果。

React Native函数组件中读取AsyncStorage的标准写法如下，以页面加载时读取用户名为例：

import React, { useEffect, useState } from 'react';
import { View, Text } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

const HomeScreen = () => {
  const [userNicename, setUserNicename] = useState('');

  useEffect(() => {
    const fetchUserData = async () => { 
      try {
        const storedValue = await AsyncStorage.getItem("user_nicename")
        // 读取到值之后再更新状态、做后续逻辑
        if(storedValue !== null) {
          setUserNicename(storedValue)
        }
      } catch(error) {
        console.log('读取本地存储失败:', error)
      }
    }
    // 必须主动调用定义好的异步函数，才会执行读取逻辑
    fetchUserData();
  }, [])

  return (
    <View>
      <Text>登录用户名：{userNicename}</Text>
    </View>
  )
}

export default HomeScreen;

如果是在按钮点击等事件回调中读取，可以参考两种写法：

// 写法1：await 写法，注意包裹await的函数必须标记为async
const onButtonPress = async () => {
  const nicename = await AsyncStorage.getItem("user_nicename")
  console.log('读取到的用户名：', nicename)
}

// 写法2：Promise.then 写法
const onAnotherPress = () => {
  AsyncStorage.getItem("user_nicename")
    .then(nicename => {
      console.log('读取到的用户名：', nicename)
    })
    .catch(err => console.log('读取失败：', err))
}

注意：不要在组件顶层作用域直接使用await调用异步函数，顶层不支持await语法，读取逻辑要放在useEffect、事件回调等合法的执行上下文中。

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