admin管理员组

文章数量:1130349

I'm new to React Native and I'm getting an error quoted below:

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.

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.

I'm new to React Native and I'm getting an error quoted below:

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.

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.

  • javascript
  • android
  • reactjs
  • react-native
Share Improve this question edited May 27, 2018 at 19:47 scrazz asked May 27, 2018 at 18:32 scrazzscrazz 3771 gold badge3 silver badges12 bronze badges 12
  • Please be more specific. Can you try to reduce your code size to a minimum example that still fails with the same error? – Loebl Commented May 27, 2018 at 18:37
  • I analyze this code for several hours and I really don't know where the problem is. If I delete all methods except render(), the problem is not showing up. – scrazz Commented May 27, 2018 at 18:42
  • I also cannot see the problem at first hand, but I think it must be related to one of the <Text> tags. Could you try and comment out the <Text> components and their children and see if you still get the error? – dentemm Commented May 27, 2018 at 18:46
  • @dentemm I removed this two <Text> tags inside <TouchableOpacity> and it doesn't have any impact. – scrazz Commented May 27, 2018 at 18:57
  • Did you also try the <Text> tag for the error message? – dentemm Commented May 27, 2018 at 18:58
 |  Show 7 more comments

10 Answers 10

Reset to default 41

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):

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

Doing it this way will allow you to avoid the require in the middle of your code, which is preferred imho.

Try this:

Remove the firebase import statement from App.js:

import firebase from 'firebase'

On Firebase initialization create a constant:

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!

It's an issue with firebase version 5.0.6 whereas downgrading to a version will resolve this issue.for example try this

$ 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

$npm install --save [email protected]

try to change the import statement to this: 

import firebase from '@firebase/app';

This works for me!

$npm install --save [email protected]

In firebase docs, they say:

Fixed an issue where ES6 wildcard imports were breaking Closure Compiler

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

I had the same problem and i solved it by removing the import statement of firebase:

import firebase from 'firebase'

and replace it by creating a global const inside my component that will be initialized once the component complete mounting :

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

then you can use all firebase methods by using this.firebase ... example:

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

 "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';

This issue comes with firebase version 5.0.6. Try downgrading firebase version by running this command.

$ npm install --save [email protected]

After this if issue still exist try downgrading firebase plugin to version 4.9.1

$npm install --save [email protected]

Rolling back to firebase version 5.0.3 also resolves the issue.

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)

but it worked so well for me

I'm new to React Native and I'm getting an error quoted below:

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.

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.

I'm new to React Native and I'm getting an error quoted below:

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.

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.

  • javascript
  • android
  • reactjs
  • react-native
Share Improve this question edited May 27, 2018 at 19:47 scrazz asked May 27, 2018 at 18:32 scrazzscrazz 3771 gold badge3 silver badges12 bronze badges 12
  • Please be more specific. Can you try to reduce your code size to a minimum example that still fails with the same error? – Loebl Commented May 27, 2018 at 18:37
  • I analyze this code for several hours and I really don't know where the problem is. If I delete all methods except render(), the problem is not showing up. – scrazz Commented May 27, 2018 at 18:42
  • I also cannot see the problem at first hand, but I think it must be related to one of the <Text> tags. Could you try and comment out the <Text> components and their children and see if you still get the error? – dentemm Commented May 27, 2018 at 18:46
  • @dentemm I removed this two <Text> tags inside <TouchableOpacity> and it doesn't have any impact. – scrazz Commented May 27, 2018 at 18:57
  • Did you also try the <Text> tag for the error message? – dentemm Commented May 27, 2018 at 18:58
 |  Show 7 more comments

10 Answers 10

Reset to default 41

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):

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

Doing it this way will allow you to avoid the require in the middle of your code, which is preferred imho.

Try this:

Remove the firebase import statement from App.js:

import firebase from 'firebase'

On Firebase initialization create a constant:

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!

It's an issue with firebase version 5.0.6 whereas downgrading to a version will resolve this issue.for example try this

$ 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

$npm install --save [email protected]

try to change the import statement to this: 

import firebase from '@firebase/app';

This works for me!

$npm install --save [email protected]

In firebase docs, they say:

Fixed an issue where ES6 wildcard imports were breaking Closure Compiler

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

I had the same problem and i solved it by removing the import statement of firebase:

import firebase from 'firebase'

and replace it by creating a global const inside my component that will be initialized once the component complete mounting :

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

then you can use all firebase methods by using this.firebase ... example:

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

 "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';

This issue comes with firebase version 5.0.6. Try downgrading firebase version by running this command.

$ npm install --save [email protected]

After this if issue still exist try downgrading firebase plugin to version 4.9.1

$npm install --save [email protected]

Rolling back to firebase version 5.0.3 also resolves the issue.

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)

but it worked so well for me

本文标签：

版权声明：本文标题：javascript - React native - objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _o 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://it.en369.cn/questions/1737072402a1443932.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。