React Native中AsyncStorage获取数据后data显示undefined问题求助

问题根源 #

AsyncStorage.getItem是异步操作，你调用fetchData()后，console.log(data)会立即执行——这时候.then里的赋值逻辑还没跑完，data还是初始的undefined。直接赋值字符串是同步操作，所以能立刻拿到值，而异步代码会在事件循环的后续阶段才执行。

解决方案 #

方案1：用async/await确保异步操作完成 #

改造fetchData为异步函数，等待存储读取完成后再执行后续逻辑：

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

let data;

const fetchData = async () => {
  try {
    const storedData = await AsyncStorage.getItem('apiData');
    data = JSON.parse(storedData);
    console.log(data); // 这里能拿到正确值
  } catch (error) {
    console.error('读取存储失败:', error);
  }
};

// 顶层无法直接用await，用立即执行异步函数包裹
(async () => {
  await fetchData();
  // 后续依赖data的逻辑放在这里
})();

export { data };

方案2：React组件中用状态管理（推荐） #

如果在React组件里使用，用useState+useEffect实现数据更新后自动触发组件重渲染：

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

const useStoredData = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const storedData = await AsyncStorage.getItem('apiData');
        setData(JSON.parse(storedData));
      } catch (error) {
        console.error('读取存储失败:', error);
      }
    };

    fetchData();
  }, []);

  return data;
};

export default useStoredData;

方案3：用回调函数处理异步结果 #

如果偏好Promise链式调用，把需要使用data的逻辑放在回调里：

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

let data;

const fetchData = (callback) => {
  AsyncStorage.getItem('apiData')
    .then(storedData => {
      data = JSON.parse(storedData);
      callback(data);
    })
    .catch(error => {
      console.error('读取存储失败:', error);
    });
};

fetchData((result) => {
  console.log(result); // 这里能拿到正确值
});

export { data };

注意事项 #

• 直接导出原始data变量的话，其他模块导入的可能还是初始undefined（基本类型变量的导出是值拷贝，不会自动更新），更推荐用状态管理或返回Promise的方式提供数据。
• 必须处理catch分支的错误，比如存储数据格式错误导致JSON.parse失败的场景。

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