如何修复React Native中Objects are not valid as a React child报错

问题背景 #

React Native开发初学者跟随教程编写代码，所写代码与教程示例完全一致但仍触发运行时报错，需定位问题并获取修复方案。

关联代码片段 #

1. AuthContext实现代码（hooks/useAuth.js） #

import React, { createContext, useContext } from "react";
import * as Google from "expo-google-app-auth";

const AuthContext = createContext({});
export const AuthProvider = ({ children }) => {
  const signInWithGoogle = async() => {
    await Google.logInAsync
  }
  return (
    <AuthContext.Provider
      value={{
        user: null,
      }}
    >
      {children}
    </AuthContext.Provider>
  );
};
export default function useAuth() {
  return useContext(AuthContext);
}

2. App根组件代码 #

import React from 'react';
import { Text, View, SafeAreaView, Button, Alert } from 'react-native';
import AuthProvider from "./hooks/useAuth";
import StackNavigator from "./StackNavigator";
import { NavigationContainer} from "@react-navigation/native";

// Function for creating button

export default function App() {
  return (
    <NavigationContainer>
      <AuthProvider>
        <StackNavigator />
      </AuthProvider>
    </NavigationContainer>
  );
}

3. LoginScreen登录页代码 #

import React from 'react';
import { View, Text } from 'react-native';
import useAuth from '../hooks/useAuth';

const LoginScreen = () => {
  const { user } = useAuth();
  console.log(user);
    return (
        <View>
            <Text>
              Login to the app
            </Text>
        </View>
    );
};
export default LoginScreen

触发的报错信息 #

Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.

报错根因 #

导入逻辑错误：useAuth.js文件中，AuthProvider是命名导出，默认导出的是useAuth自定义Hook。App根组件里错误地将默认导出的useAuth Hook当做AuthProvider组件导入并渲染。useAuth执行后返回的是普通JS对象（当前上下文默认值是空对象{}），React无法直接渲染普通对象，因此抛出该错误。

修复步骤 #

• 修改App根组件中AuthProvider的导入语句，从默认导入改为命名导入：
  将原来的import AuthProvider from "./hooks/useAuth";替换为

  import { AuthProvider } from "./hooks/useAuth";
  

• （非当前报错相关，后续功能开发需修复）AuthContext中signInWithGoogle方法写法有误，Google.logInAsync是函数，需要加括号传入配置参数调用，当前写法没有实际执行登录逻辑。

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