React Navigation中AsyncStorage为空时判断语句失效问题排查

我希望在AsyncStorage为空时跳转到SignIn页面，但应用始终跳转到Home页面。我编写了checkUser函数来判断AsyncStorage是否为空，但该逻辑未正常工作。我已在手机设置中清空应用存储后重新运行，问题依旧，恳请帮忙排查错误。

以下是我的代码：

import React, { useState } from "react";
import AsyncStorage from '@react-native-async-storage/async-storage';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {Home} from './Home';
import {Chat} from './Chat';
import {SignIn} from './SignIn';
import {SignUp} from './SignUp';

const Stack = createNativeStackNavigator();

function App(){
  async function checkUser() {  
    const user = await AsyncStorage.getItem("user");
    return user;
  } 
 
    const ui = (
      <NavigationContainer>
        <Stack.Navigator initialRouteName={checkUser!==null?"Home":"Sign In"}>
          <Stack.Screen name="Sign In" component={SignIn} />
          <Stack.Screen name="Sign Up" component={SignUp}/>
          <Stack.Screen name="Home" component={Home}/>
          <Stack.Screen name="Chat" component={Chat}/>
        </Stack.Navigator>
      </NavigationContainer>
    );
    return ui;

}

export default App;

你的代码存在两个核心问题：

1. 错误判断了checkUser函数本身，而非调用它的返回值
   你写的checkUser!==null是在判断checkUser这个函数对象是否存在，而不是调用它获取AsyncStorage里的user值。函数本身永远不会是null，所以这个判断永远为true，导致初始路由一直是Home。

2. 异步函数的结果无法直接用于同步渲染的初始路由
   checkUser是异步函数，直接放在initialRouteName里无法获取到异步返回的user值，因为组件渲染时异步操作还未完成。

修复后的代码 #

import React, { useState, useEffect } from "react";
import AsyncStorage from '@react-native-async-storage/async-storage';
import {NavigationContainer, View, ActivityIndicator} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {Home} from './Home';
import {Chat} from './Chat';
import {SignIn} from './SignIn';
import {SignUp} from './SignUp';

const Stack = createNativeStackNavigator();

function App(){
  // 存储用户是否存在的状态，以及加载状态
  const [userExists, setUserExists] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  async function checkUser() {  
    const user = await AsyncStorage.getItem("user");
    // 判断user是否存在，存在则设为true，否则false
    setUserExists(!!user);
    setIsLoading(false);
  } 

  // 组件挂载时执行用户检查
  useEffect(() => {
    checkUser();
  }, []);

  // 加载过程中显示加载组件
  if (isLoading) {
    return (
      <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
        <ActivityIndicator size="large" />
      </View>
    );
  }

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName={userExists ? "Home" : "Sign In"}>
        <Stack.Screen name="Sign In" component={SignIn} />
        <Stack.Screen name="Sign Up" component={SignUp}/>
        <Stack.Screen name="Home" component={Home}/>
        <Stack.Screen name="Chat" component={Chat}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

关键修复点说明 #

• 使用useState管理userExists状态，标记AsyncStorage中是否有用户数据
• 用useEffect在组件首次挂载时调用checkUser异步函数，更新状态
• 增加isLoading状态，避免在异步请求完成前渲染错误的路由
• 最终根据userExists的布尔值决定初始路由：存在则进入Home，否则进入Sign In

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