React Native抽屉菜单条件渲染报错：‘nothing was returned from render’

你的问题核心在于函数组件的渲染逻辑不能是异步的，而且当前的Display组件没有返回任何JSX内容——你只是调用了getData()这个异步函数，但组件本身没有return语句，同时异步函数的返回值也没办法直接作为组件的渲染结果，这就导致React抛出"Nothing was returned from render"错误。

下面是具体的修改方案，我们用React的状态管理来处理异步登录状态的获取，并实现条件渲染：

修改后的代码示例 #

优化后的Display组件 #

import { useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
// 请确保已导入你的页面组件：HomeArea、LoginPage、MyAccount等

const Display = () => {
  // 用状态管理登录状态，初始为null表示正在加载
  const [isLoggedIn, setIsLoggedIn] = useState(null);

  useEffect(() => {
    // 封装异步获取登录状态的逻辑
    const checkLoginStatus = async () => {
      try {
        const value = await AsyncStorage.getItem('loggedIn');
        if (value !== null) {
          const loginStatus = value === 'true';
          setIsLoggedIn(loginStatus);
          console.log(loginStatus ? 'logged in user ' : 'logged out user ');
        } else {
          // 无登录记录时默认设为未登录
          setIsLoggedIn(false);
        }
      } catch (e) {
        console.error('读取登录状态失败:', e);
        // 出错时默认设为未登录
        setIsLoggedIn(false);
      }
    };

    checkLoginStatus();
  }, []); // 空依赖数组确保只在组件挂载时执行一次

  // 加载状态下返回加载提示（可替换为RN的ActivityIndicator）
  if (isLoggedIn === null) {
    return <div>加载中...</div>;
  }

  // 根据登录状态条件渲染抽屉菜单
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeArea} />
        <Drawer.Screen name="Login" component={LoginPage} />
        {/* 仅登录用户可见的菜单 */}
        {isLoggedIn && <Drawer.Screen name="User Dashboard" component={MyAccount} />}
        {/* 登录显示Logout，未登录隐藏 */}
        {isLoggedIn && <Drawer.Screen name="Logout" component={Logout} />}
        <Drawer.Screen name="Settings" component={Settings} />
      </Drawer.Navigator>
      <StatusBar barStyle="dark-content" />
    </NavigationContainer>
  );
};

简化后的App组件 #

const App = () => {
  return <Display />;
};

关键改动说明 #

• 用useState管理状态：组件需要同步状态驱动渲染，异步获取的登录状态通过setIsLoggedIn更新，触发组件重新渲染。
• 用useEffect执行异步操作：异步逻辑放在useEffect中，避免在渲染阶段执行异步代码，同时空依赖数组确保只执行一次。
• 添加加载状态处理：在获取登录状态的间隙返回加载提示，避免页面空白。
• 精准条件渲染：根据isLoggedIn状态动态显示/隐藏特定菜单，避免重复渲染完全相同的导航容器。

这样修改后，组件就能正确返回JSX内容，并且根据登录状态动态渲染对应的抽屉菜单了。

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