React Native问题：AsyncStorage无法获取已存储数据

核心问题分析 #

你的代码里，useEffect中直接同步调用了storeData()和retrieveData()，但这两个都是异步函数。retrieveData会在storeData完成数据存储之前就执行，导致读取时数据还未写入，自然拿不到结果。

修复方案 #

将useEffect内的逻辑改为异步执行，确保等待存储完成后再进行读取：

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

export default function MyComponent() {
  useEffect(() => {
    // 封装异步初始化逻辑
    const initData = async () => {
      await storeData();
      await retrieveData();
    };
    initData();
  }, []);

  const storeData = async () => {
    try {
      await AsyncStorage.setItem('myKey', 'Hello, Stack Overflow!');
      console.log('数据存储成功');
    } catch (error) {
      console.error('存储数据失败:', error);
    }
  };

  const retrieveData = async () => {
    try {
      const data = await AsyncStorage.getItem('myKey');
      console.log('获取到的数据:', data);
    } catch (error) {
      console.error('获取数据失败:', error);
    }
  };

  return (
    <View>
      <Text>Check the console for AsyncStorage logs</Text>
    </View>
  );
}

额外排查步骤 #

如果修复后仍有问题，可以按以下步骤排查：

• 确认依赖安装正确：确保已安装@react-native-async-storage/async-storage，iOS项目需执行cd ios && pod install，Android无需额外配置。
• 验证存储持久化：重启APP后单独调用retrieveData，看是否能获取到数据，确认数据是否真正写入本地存储。
• 检查键名一致性：AsyncStorage的键名区分大小写，确保setItem和getItem使用的键完全一致（包括大小写、特殊字符）。
• 查看错误日志：仔细检查storeData和retrieveData的catch块错误信息，确认存储/读取过程是否真的没有异常。

内容的提问来源于stack exchange，提问作者André Silverio Silva