React Native中AsyncStorage自动登录功能报错及修复咨询

问题描述 #

开发首个React Native应用，已完成登录页面开发并能将用户信息存入AsyncStorage，但在实现基于AsyncStorage的自动登录逻辑时，App.js运行后出现以下错误：

Error: Objects are not valid as a React child (found: object with keys {_U, _V, _W, _X})

错误原因 #

1. 异步函数返回Promise对象：你定义的c()是异步函数，调用后返回的是Promise而非预期的布尔值/用户信息。直接用c() == false判断并传给createAppContainer，React无法渲染Promise对象，导致报错。
2. 重复路由定义：AppNavigator2中重复定义了Home路由，属于无效配置。
3. 冗余参数：getData函数的参数未被使用，一直固定读取@userauthkey。

修复方案 #

1. 重构App.js：用React组件处理异步登录判断 #

不能在顶层代码中直接依赖异步函数的返回值，需将App改为React组件，通过状态管理登录状态：

import React, { useState, useEffect } from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import AsyncStorage from '@react-native-async-storage/async-storage';
import Login from './components/login'
import Signup from './components/signup'
import Home from './components/home'
import Profile from './components/profile';

// 未登录时的路由栈
const AuthStack = createStackNavigator({
  Login: { screen: Login },
  Signup: { screen: Signup },
});

// 已登录时的路由栈
const AppStack = createStackNavigator({
  Home: { screen: Home },
  Profile: { screen: Profile },
  // 如需从已登录页面跳转登录/注册，可保留以下路由（可选）
  Login: { screen: Login },
  Signup: { screen: Signup },
});

// 预创建导航容器
const AuthContainer = createAppContainer(AuthStack);
const AppContainer = createAppContainer(AppStack);

export default function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(null); // null表示正在验证登录状态

  useEffect(() => {
    // 组件挂载时检查登录状态
    checkAuthStatus();
  }, []);

  const checkAuthStatus = async () => {
    try {
      const userAuth = await AsyncStorage.getItem('@userauthkey');
      // 根据是否存在用户信息判断登录状态
      setIsLoggedIn(userAuth !== null);
    } catch (error) {
      console.error('读取登录状态失败:', error);
      setIsLoggedIn(false);
    }
  };

  // 验证过程中可显示加载提示（此处用null代替，可替换为ActivityIndicator）
  if (isLoggedIn === null) {
    return null;
  }

  // 根据登录状态渲染对应导航容器
  return isLoggedIn ? <AppContainer /> : <AuthContainer />;
}

2. 优化登录页面的冗余代码 #

• 移除getData函数的冗余参数：

const getData = async () => {
  try {
    const value = await AsyncStorage.getItem('@userauthkey');
    return value !== null ? value : false;
  } catch (e) {
    console.log(e);
    return false;
  }
}

• 修复scroll样式的无效颜色值：

scroll: {
  backgroundColor: 'black', // 替换原有的'#'
},

核心逻辑说明 #

• 异步操作必须放在React组件的生命周期钩子（如useEffect）中执行，确保在组件挂载后再读取AsyncStorage，避免同步代码中处理未resolve的Promise。
• 通过状态isLoggedIn控制渲染的导航容器，加载状态可添加加载组件（如ActivityIndicator）提升用户体验。

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