Question

我是React Native的新手，我在下面引用了一个错误：

对象无效作为React子对象（找到：具有键{$$ typeof，type，key，ref，props，_owner，_store}的对象）。如果您要渲染子集合，请改用数组。

这是我的整个代码包含在组件文件中，除了样式：

import React, { Component } from 'react';
import { View, Text, TextInput, TouchableOpacity, Image, StyleSheet } from 'react-native';
import firebase from 'firebase';

class LoginForm extends Component {

    state = { email: '', password: '', error: '', loading: false };

    onButtonPress(){
        const email = this.state.email;
        const password = this.state.password;

        this.setState({error: '', loading: true});

        firebase.auth().signInWithEmailAndPassword(email, password)
            .then(this.onLoginSuccess.bind(this))
            .catch(() => {
                firebase.auth().createUserWithEmailAndPassword(email, password)
                .then(this.onLoginSuccess.bind(this))
                .catch(this.onLoginFail.bind(this));
            });
    }

    onLoginSuccess(){
        this.setState({email: '', password: '', error: '', loading: false});
    }

    onLoginFail(){
        this.setState({error: 'Nie udalo sie utworzyc konta.', loading: false});
    }

    render(){
        return(
            <View style={styles.container}>
                <View style={styles.imageContainer}>
                    <Image 
                        style={styles.image}
                        source={require('../images/loginIcon.png')}
                    />
                </View>
                <View style={styles.formContainer}>
                    <TextInput
                        style={styles.input}
                        placeholder="Email..."
                        placeholderTextColor='rgba(255,255,255,0.9)'
                        underlineColorAndroid='rgba(0,0,0,0)'
                        onChangeText={(email) => this.setState({email: email})}
                        value={this.state.email}
                        autoCorrect={false}
                    />
                    <TextInput
                        style={styles.input}
                        placeholder="Hasło..."
                        placeholderTextColor='rgba(255,255,255,0.9)'
                        underlineColorAndroid='rgba(0,0,0,0)'
                        autoCorrect={false}
                        onChangeText={(password) => this.setState({password: password})}
                        value={this.state.password}
                        secureTextEntry
                    />
                    <TouchableOpacity style={styles.buttonContainer}>
                        <Text style={styles.button}>
                            Zaloguj się
                        </Text>
                    </TouchableOpacity>
                    <Text style={styles.error}>
                        {this.state.error}
                    </Text>
                </View>
            </View>
        );
    }
}

我很困惑如何解决这个问题。提前谢谢。

Answer 1

我今天有这个问题。我对源代码在5.0.3和5.0.4之间进行了比较，发现导出已更改。我还发现，如果将import语句更改为以下内容，则它可以与最新版本（5.3.0）一起使用：

import firebase from '@firebase/app'
import '@firebase/auth'

以这种方式进行操作将使您避免在代码中间使用require，这是首选的恕我直言。

Answer 2

试试这个：

从App.js中删除firebase import语句：

import firebase from 'firebase'

在Firebase初始化时创建一个常量：

initializeFirebase() {
  const firebase = require("firebase");

  // Initialize Firebase
  var config = {
  ...
  };
  firebase.initializeApp(config);

  //inicializando o firestore
  const firestore = require("firebase/firestore");
  db = firebase.firestore();
  db.settings({ timestampsInSnapshots: true });
}

componentWillMount() {
  this.initializeFirebase();
...
}

对我而言，这种解决方法效果很好！

Answer 3

这是Firebase 5.0.6版的一个问题，而降级到一个版本可以解决此问题。例如，尝试此

$ npm install --save firebase@5.0.4

如果5.0.4版本也不适用于您，请尝试4.9.1版，因为这是我正在使用的，它为我解决了此问题

$npm install --save firebase@4.9.1

Answer 4

尝试将导入语句更改为此：

AAMP    chr2    219130810   219134433   transcript
AAMP    chr2    219132103   219134868   transcript
AARS    chr16   70286198    70323446    transcript
AARS    chr16   70287359    70292118    transcript
AARS2   chr6    44267391    44281063    transcript

Answer 5

这对我有用！

$npm install --save firebase@4.9.1

在firebase文档中，他们说：

解决了ES6通配符导入破坏Closure Compiler的问题

LINK >> https://firebase.google.com/support/release-notes/js

Answer 6

我遇到了同样的问题，我通过删除firebase的import语句解决了这个问题：

import firebase from 'firebase'

并通过在我的组件内部创建一个全局const来替换它，该组件将在组件完成安装后初始化：

componentDidMount() {
    this.firebase = require('firebase');
}

然后，您可以使用this.firebase使用所有firebase方法... 例如：

this.firebase.auth().onAuthStateChanged((user) => {
   //Some Code
  });

Answer 7

 "dependencies": {
"firebase": "^5.5.9",
"react": "16.6.1",
"react-native": "0.57.7",
"react-native-material-kit": "^0.5.1",
"react-native-vector-icons": "^6.1.0"

}，具有上述依赖性，我设法通过以下方法解决了这个问题

import firebase from '@firebase/app';

Answer 8

此问题随Firebase版本5.0.6一起提供。通过运行此命令，尝试降级Firebase版本。

$ npm install --save firebase@5.0.4

在此之后，如果问题仍然存在，请尝试将Firebase插件降级到4.9.1版

$npm install --save firebase@4.9.1

Answer 9

回滚到Firebase版本5.0.3也可以解决该问题。

Answer 10

我没有降级，我只需要添加

select

这意味着您导入了要使用的每个firebase组件...（希望这是对的）

但是对我来说效果很好

React native - 对象无效作为React子对象（找到：具有键{$$ typeof，type，key，ref，props，_owner，_store}的对象）

10 个答案: