同步函数如何获取异步返回值？React Native读取AsyncStorage实现方案问询

问题核心原因 #

你的现有写法存在两个核心问题：

1. AsyncStorage读取是异步IO操作，执行优先级远低于同步组件渲染流程，App首次渲染时异步请求还未返回，token和expirationDate始终为初始的undefined，判断逻辑完全不符合预期
2. 条件判断误用了按位或运算符|，应该使用逻辑或运算符||

正确实现方案 #

用React内置状态和生命周期钩子处理异步读取逻辑，加加载态兜底即可解决问题：

import React, { useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
// 引入你要用到的页面组件，比如加载屏、登录页、主页
import SplashScreen from './src/components/SplashScreen';
import LoginPage from './src/pages/LoginPage';
import MainPage from './src/pages/MainPage';

const App = () => {
  const [token, setToken] = useState(null);
  const [expirationDate, setExpirationDate] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // 并行读取两个存储项，提升读取速度
    const getAuthInfo = async () => {
      try {
        const [storedToken, storedExpire] = await Promise.all([
          AsyncStorage.getItem('accessToken'),
          AsyncStorage.getItem('expirationTokenDate')
        ]);
        setToken(storedToken);
        setExpirationDate(storedExpire ? Number(storedExpire) : null);
      } catch (e) {
        // 读取失败的兜底处理
        setToken(null);
        setExpirationDate(null);
      } finally {
        setIsLoading(false);
      }
    };

    getAuthInfo();
  }, []);

  // 读取过程中显示加载屏，避免逻辑判断异常
  if (isLoading) {
    return <SplashScreen />;
  }

  // 校验登录状态
  if (!token || !expirationDate || expirationDate < Date.now()) {
    return <LoginPage />;
  }

  // 登录有效返回主页
  return <MainPage />;
};

export default App;

注意事项 #

• 目前React Native官方已经将AsyncStorage从核心库中移除，需要先安装@react-native-async-storage/async-storage依赖后再导入使用
• 存储过期时间的时候建议统一存时间戳数值，读取后转Number再比较，避免字符串比较导致的逻辑错误
• 加载态可以复用APP启动的闪屏页，用户不会感知到额外的等待过程

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