React Native添加AdsConsent后出现React子元素无效错误排查

错误原因 #

这个Objects are not valid as a React child错误，核心是你在组件的渲染逻辑里直接返回了Promise对象（那些{_h, _i, _j, _k}是React内部标记未完成Promise的属性）——React根本没法把Promise当成UI元素渲染。

而你删除末尾return后没报错但应用启动不了，是因为React组件必须返回合法的React元素（JSX、null、数组），空着不返回不符合组件要求。

解决方法 #

用React的状态+副作用钩子来处理异步的广告同意流程，不要在渲染函数里直接调用异步方法。举个典型的正确实现：

import React, { useState, useEffect } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';
import { AdsConsent } from 'react-native-google-mobile-ads';

export default function App() {
  // 维护同意状态和加载状态
  const [consentStatus, setConsentStatus] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  // 在useEffect里执行异步的同意流程
  useEffect(() => {
    const handleConsent = async () => {
      try {
        // 请求同意信息更新
        const consentInfo = await AdsConsent.requestInfoUpdate();
        
        // 判断是否需要展示同意弹窗
        if (consentInfo.isConsentFormAvailable) {
          const formResult = await AdsConsent.showForm();
          setConsentStatus(formResult.status);
        } else {
          setConsentStatus(consentInfo.status);
        }
      } catch (err) {
        console.error('同意流程出错:', err);
        setConsentStatus('error');
      } finally {
        setIsLoading(false);
      }
    };

    handleConsent();
  }, []);

  // 加载中显示loading
  if (isLoading) {
    return <ActivityIndicator size="large" color="#0000ff" />;
  }

  // 加载完成后渲染主应用内容
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>当前同意状态: {consentStatus}</Text>
      {/* 这里放你的主应用组件，比如之前正常运行的「My position」核心代码 */}
    </View>
  );
}

关键注意点 #

• 所有AdsConsent的异步方法（requestInfoUpdate、showForm等）都要放在useEffect里调用，不能直接写在渲染函数或return语句中
• 必须通过useState维护流程状态，根据状态分阶段渲染不同的UI（加载中、主应用、错误提示等）
• 组件最终一定要返回合法的React元素，不能空着

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