React Native AsyncStorage首次获取数据为空，保存后恢复正常的原因？

核心问题分析 #

你遇到的首次打开页面获取数据为空、热重载后正常的情况，主要由以下几个代码问题导致：

1. 异步读取未正确等待 #

你的getToken和getMail函数标记了async，但内部调用AsyncStorage.getItem时没有加await。虽然通过then()也能拿到最终值，但这种写法会导致Promise未被正确解析，可能引发时序混乱——首次加载时异步读取的优先级被延后，而热重载时App缓存了读取结果，所以能快速返回数据。

正确写法应该补上await：

getToken: async () => {
  const token = await AsyncStorage.getItem('userToken');
  return token;
},
getMail: async () => {
  const mail = await AsyncStorage.getItem('userMail');
  return mail;
},

2. 状态更新的异步特性误区 #

React的setToken/setMail是异步操作，你在调用setToken(res)后立刻console.log(token)，打印的是更新前的旧状态，这会让你误以为没获取到数据，但实际状态已经在后台更新了。如果要查看更新后的状态，应该用useEffect监听：

useEffect(() => {
  console.log('更新后的token:', token);
}, [token]);

useEffect(() => {
  console.log('更新后的mail:', mail);
}, [mail]);

3. 数据读取时机错误 #

如果你的读取逻辑直接写在组件顶层（而非useEffect中），组件每次渲染都会触发读取操作，首次加载时异步读取还未完成就渲染了空值；热重载时读取操作从缓存取数，速度更快，所以能正常显示。

正确的做法是把读取逻辑放在useEffect中，确保组件挂载时仅执行一次：

useEffect(() => {
  const fetchUserData = async () => {
    const token = await getToken();
    const mail = await getMail();
    setToken(token || '');
    setMail(mail || '');
  };
  fetchUserData();
}, []);

4. 数据存储时未等待完成（最可能的直接原因） #

如果登录或存储数据时，你调用AsyncStorage.setItem后没有加await就直接跳转到OrderListScreen，此时数据还没写入到本地存储，首次打开页面自然读不到；而热重载时App重新加载，之前的存储操作已经完成，所以能读取到数据。

存储数据时务必等待操作完成：

// 示例：登录后存储数据的正确写法
const saveUserData = async (token, mail) => {
  await AsyncStorage.setItem('userToken', token);
  await AsyncStorage.setItem('userMail', mail);
  // 等待存储完成后再跳转
  navigation.navigate('OrderListScreen');
};

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