Question

错误如下：

Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead.
throwOnInvalidObjectType
    C:\reactnative\auth\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:7436:6
reconcileChildFibers
    C:\reactnative\auth\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:8470:31
reconcileChildrenAtExpirationTime
    C:\reactnative\auth\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:8635:8
reconcileChildren
    C:\reactnative\auth\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:8603:6
updateHostRoot
    C:\reactnative\auth\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:8931:26
beginWork
    C:\reactnative\auth\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:9586:30
performUnitOfWork
    C:\reactnative\auth\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:12924:25
workLoop
    C:\reactnative\auth\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:12953:43
renderRoot
    C:\reactnative\auth\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:12996:17
performWorkOnRoot
    C:\reactnative\auth\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:13632:34
performWork
    C:\reactnative\auth\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:13545:26
performSyncWork
    C:\reactnative\auth\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:13506:16
requestWork
    C:\reactnative\auth\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:13392:6
scheduleWorkImpl
    C:\reactnative\auth\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:13259:24
scheduleWork
    C:\reactnative\auth\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:13207:28
scheduleRootUpdate
    C:\reactnative\auth\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:13930:17
_updateContainerAtExpirationTime
    C:\reactnative\auth\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:13966:6
updateContainer
    C:\reactnative\auth\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:13991:8
render
    C:\reactnative\auth\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:14726:35
renderApplication
    C:\reactnative\auth\node_modules\react-native\Libraries\ReactNative\renderApplication.js:49:21
run
    C:\reactnative\auth\node_modules\react-native\Libraries\ReactNative\AppRegistry.js:102:10
runApplication
    C:\reactnative\auth\node_modules\react-native\Libraries\ReactNative\AppRegistry.js:194:26
__callFunction
    C:\reactnative\auth\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:351:47
<unknown>
    C:\reactnative\auth\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:116:26
__guardSafe
    C:\reactnative\auth\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:314:6
callFunctionReturnFlushedQueue
    C:\reactnative\auth\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:115:17

我将标题作为可重用的组件，我可以将其用于其他项目。

App.js 这包含导致错误的firebase存储桶

import React, { Component } from 'react';

import { View } from 'react-native';
import firebase from 'firebase';
import { Header } from './components/common';
import LoginForm from './components/LoginForm';

class App extends Component {
    componentWillMount() {
        firebase.initializeApp({
            apiKey: 'AIzaSyBQu8oX851Q53RL_5UylJPI1cCU203s2Us',
            authDomain: 'authentication-163ed.firebaseapp.com',
            databaseURL: 'https://authentication-163ed.firebaseio.com',
            projectId: 'authentication-163ed',
            storageBucket: 'authentication-163ed.appspot.com',
            messagingSenderId: '623306210919'
        });
    }
    render() {
        return(
            <View>
            <Header headerText="Authentication" />
            <LoginForm />
            </View>
            );
    }
}
export default App;

Header.js

// Import a library to create a component
import React from 'react';
import { Text, View } from 'react-native';

//Create a component
const Header = (props) => {
    const  { textStyle, viewStyle } = styles;
    return (
        <View style={viewStyle}>
            <Text style={textStyle}>{props.headerText}</Text>
        </View>
        );

};
const styles = {
    viewStyle: {
        backgroundColor: '#F8F8F8',
        justifyContent: 'center',
        alignItems: 'center',
        height: 60,
        paddingTop: 15,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.9,
        elevation: 2,
        position: 'relative'
    },
    textStyle: {
        fontSize: 20
    }
};

//Make the component available
export { Header };

Login.js

import React, { Component } from 'react';
import { TextInput } from 'react-native';
import { Button, Card, CardSection } from './common';

class LoginForm extends Component {
    state = { text: '' };
    render() {
        return(
                <Card>
                    <CardSection>
                        <TextInput 
                        value={this.state.text}
                        onChangeText={text => this.setState({ text })} />
                    </CardSection>
                    <CardSection />
                    <CardSection>
                        <Button>Log in</Button>
                    </CardSection>
                </Card>
            );
    }
}

export default LoginForm;

错误立即消失我从我的代码中删除了firebase.initializeApp（）api。但它很重要，它与firebase相关联，因为它会为应用程序的用户进行身份验证。

Answer 1

当我在Udemy上遵循“完整的React Native和Redux课程”时，我遇到了完全相同的问题，它看起来与您的代码非常相似！演讲71的问答之一也涵盖了相同的问题，解决方案是替换：

import firebase from 'firebase';

在App.js中具有：

import firebase from '@firebase/app';

这会导致我的配置出现eslint错误，但它可以正常运行。 Firebase SDK 5.0.4发行时，它被称为issue。

我初始化firebase时，React Native错误一直在我的设备上弹出

1 个答案: