React Native异步组件报错：Objects are not valid as a React child求解

错误原因 #

你写的PlatformInfo是async函数组件，async函数执行后返回的是Promise对象，而React要求组件必须返回JSX元素（或null）。React尝试渲染这个Promise对象时，就会抛出Objects are not valid as a React child的错误。

修复方案 #

改用React的useState存储应用安装状态，useEffect执行异步检查逻辑，让组件始终返回JSX元素。

修改后的PlatformInfo.js代码 #

import { Platform, Text, View, ActivityIndicator } from 'react-native';
import SharedGroupPreferences from 'react-native-shared-group-preferences';
import { useState, useEffect } from 'react';

const checkAppInstalled = async (packageName) => {
  if (Platform.OS === 'android') {
    try {
      return await SharedGroupPreferences.isAppInstalledAndroid(packageName);
    } catch (e) {
      return false;
    }
  } else if (Platform.OS === 'ios') {
    // 补充iOS端的检查逻辑（请参考库文档调整实际API）
    try {
      return await SharedGroupPreferences.isAppInstalledIOS(packageName);
    } catch (e) {
      return false;
    }
  }
  return false;
};

export const PlatformInfo = ({ packageName }) => {
  const [isAppInstalled, setIsAppInstalled] = useState(null); // null表示加载中
  const isAndroid = Platform.OS === 'android';

  useEffect(() => {
    const fetchData = async () => {
      const result = await checkAppInstalled(packageName);
      setIsAppInstalled(result);
    };
    fetchData();
  }, [packageName]);

  // 加载状态下显示加载指示器
  if (isAppInstalled === null) {
    return <ActivityIndicator size="small" />;
  }

  return (
    <View>
      <Text>Operating System: {isAndroid ? 'Android' : 'iOS'}</Text>
      <Text>
        {packageName}: {isAppInstalled ? 'Installed' : 'Not installed'}
      </Text>
    </View>
  );
};

关键修改点 #

• 移除组件的async声明，组件回归普通函数
• 用useState定义isAppInstalled状态，初始值为null表示加载中
• 用useEffect执行异步检查逻辑，避免组件渲染时直接执行异步操作
• 补充加载状态的UI反馈（ActivityIndicator）
• 修正了原代码中安装状态的文本判断逻辑（原逻辑写反了）
• 补充了iOS端的检查逻辑框架（需根据react-native-shared-group-preferences的实际API调整）

原App.tsx使用方式无需修改 #

// App.tsx中继续正常使用组件即可
<PlatformInfo packageName={'com.facebook.android'} />

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