React native - 对象作为 React 子对象无效(找到:具有键 {$$typeof、type、key、r

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 之间的源代码进行了差异，发现导出已更改。我还发现，如果我将导入语句更改为以下内容，它适用于最新版本(5.3.0(：

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

这样做可以让您避免代码中间的require，恕我直言，这是首选。

Answer 2

试试这个：

从应用.js中移除 Firebase 导入语句：

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

尝试将导入语句更改为以下内容：

import firebase from '@firebase/app';

Answer 5

这对我有用！

$npm install --save firebase@4.9.1

在Firebase文档中，他们说：

修复了 ES6 通配符导入中断闭包编译器的问题

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

Answer 6

我遇到了同样的问题，我通过删除 firebase 的导入语句解决了它：

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

我没有降级我只需要添加

import "@firebase/database";

这意味着您导入要使用的每个 Firebase 组件...(只是希望这是对的(

但它对我来说效果很好