javascript React Native - 对象作为 React 子对象无效（找到：带有键 {$$typeof, type, key, ref, props, _owner, _store} 的对象）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50555275/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React native - objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store})
提问by scrazz
I'm new to React Native and I'm getting an error quoted below:
我是 React Native 的新手，我收到下面引用的错误：
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.
对象作为 React 子对象无效（找到：带有键 {$$typeof, type, key, ref, props, _owner, _store} 的对象）。如果您打算渲染一组子项，请改用数组。
Here's my whole code included in the component file, except styling:
这是组件文件中包含的全部代码，样式除外：
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>
);
}
}
I'am quite confused how to fix that issue. Thanks in advance.
我很困惑如何解决这个问题。提前致谢。
回答by GrokSrc
I had this problem today. I ran a diff on the source code between 5.0.3 and 5.0.4 and found that the exports have changed. I also found that if I change the import statement to the following that it works with the latest version (5.3.0):
我今天遇到了这个问题。我对 5.0.3 和 5.0.4 之间的源代码进行了比较，发现导出发生了变化。我还发现，如果我将导入语句更改为以下内容，则它适用于最新版本 (5.3.0)：
import firebase from '@firebase/app'
import '@firebase/auth'
Doing it this way will allow you to avoid the requirein the middle of your code, which is preferred imho.
这样做可以让您避免require在代码中间，这是首选 imho。
回答by Clebertom
Try this:
试试这个：
Remove the firebase import statement from App.js:
从 App.js 中删除 firebase import 语句：
import firebase from 'firebase'
On Firebase initialization create a constant:
在 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();
...
}
To me this workaround works very well!
对我来说，这种解决方法非常有效！
回答by Anwar Gul
It's an issue with firebase version 5.0.6 whereas downgrading to a version will resolve this issue.for example try this
这是 firebase 版本 5.0.6 的一个问题，而降级到一个版本将解决这个问题。例如试试这个
$ npm install --save [email protected]
$ npm install --save [email protected]
If version 5.0.4 is also not working for you than try version 4.9.1 as this is what i am using and it resolved this issue for me
如果 5.0.4 版也不适合您，请尝试 4.9.1 版，因为这是我正在使用的，它为我解决了这个问题
$npm install --save [email protected]
$npm install --save [email protected]
回答by Eliran Azulay
try to change the import statement to this:
尝试将导入语句更改为：
import firebase from '@firebase/app';
回答by dieh1984
This works for me!
这对我有用！
$npm install --save [email protected]
In firebase docs, they say:
在 firebase 文档中，他们说：
Fixed an issue where ES6 wildcard imports were breaking Closure Compiler
修复了 ES6 通配符导入破坏 Closure Compiler 的问题
LINK >> https://firebase.google.com/support/release-notes/js
回答by javeedishaq
"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"
}, with above dependencies, I managed to solve this issue by doing following
有了上述依赖项，我设法通过执行以下操作来解决此问题
import firebase from '@firebase/app';
回答by Mohammed Alawneh
I had the same problem and i solved it by removing the import statement of firebase:
我遇到了同样的问题，我通过删除 firebase 的导入语句解决了这个问题：
import firebase from 'firebase'
and replace it by creating a global constinside my component that will be initialized once the component complete mounting :
并通过const在我的组件内部创建一个全局变量来替换它，一旦组件完成安装，该全局变量将被初始化：
componentDidMount() {
this.firebase = require('firebase');
}
then you can use all firebase methods by using this.firebase...
example:
那么您可以使用所有 firebase 方法使用this.firebase... 示例：
this.firebase.auth().onAuthStateChanged((user) => {
//Some Code
});
回答by Ahmad Sadiq
Rolling back to firebase version 5.0.3 also resolves the issue.
回滚到 firebase 版本 5.0.3 也可以解决该问题。
回答by Nkoro Joseph Ahamefula
I didn't downgrade I just had to add
我没有降级我只需要添加
import "@firebase/database";
What it means is that you import each firebase component you want to use...(just hope this is right)
这意味着您导入要使用的每个 firebase 组件...（只是希望这是正确的）
but it worked so well for me
但它对我来说效果很好
回答by Asiri Piyajanaka
This issue comes with firebase version 5.0.6. Try downgrading firebase version by running this command.
此问题随 Firebase 5.0.6 版一起出现。尝试通过运行此命令来降级 firebase 版本。
$ npm install --save [email protected]
After this if issue still exist try downgrading firebase plugin to version 4.9.1
在此之后，如果问题仍然存在，请尝试将 firebase 插件降级到 4.9.1 版
$npm install --save [email protected]
