web-dev-qa-db-fra.com

React native - les objets ne sont pas valides en tant qu'enfants React (trouvés: objet avec les clés {$$ typeof, type, clé, ref, props, _owner, _store})

Je suis nouveau dans React Native et je reçois une erreur citée ci-dessous:

Les objets ne sont pas valides en tant qu'enfants React (trouvés: objet avec les clés {$$ typeof, type, clé, ref, props, _owner, _store}). Si vous vouliez rendre une collection d'enfants, utilisez plutôt un tableau.

Voici tout mon code inclus dans le fichier de composant, à l'exception du style:

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>
        );
    }
}

Je suis assez confus pour résoudre ce problème. Merci d'avance.

javascriptandroidreactjsreact-native
14
scrazz

Essaye ça:

Supprimez l'instruction d'importation firebase de App.js:

import firebase from 'firebase'

Sur l’initialisation Firebase, créez une constante:

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();
...
}

Pour moi, cette solution de contournement fonctionne très bien!

30
Clebertom

J'ai eu ce problème aujourd'hui. J'ai couru un diff sur le code source entre 5.0.3 et 5.0.4 et ai constaté que les exportations ont changé. J'ai également constaté que si je modifie l'instruction d'importation comme suit, elle fonctionne avec la dernière version (5.3.0):

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

En procédant ainsi, vous éviterez la require au milieu de votre code, qui est préférable à mon humble avis. 

39
GrokSrc

C'est un problème avec firebase version 5.0.6 alors que le passage à une version antérieure résoudra ce problème. Par exemple, essayez ceci

$ npm install --save [email protected]

Si la version 5.0.4 ne fonctionne pas non plus pour vous, essayez la version 4.9.1, car c’est ce que j’utilise et le problème a été résolu pour moi.

$npm install --save [email protected]

15
Anwar Gul

essayez de changer l'instruction d'importation en ceci: 

import firebase from '@firebase/app';
6
Eliran Azulay

Cela fonctionne pour moi!

$npm install --save [email protected]

Dans la documentation firebase, ils disent:

Correction d'un problème en raison duquel les importations de caractères génériques ES6 cassaient Closure Compiler 

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

2
dieh1984
 "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"

}, avec les dépendances ci-dessus, j'ai réussi à résoudre ce problème en suivant

import firebase from '@firebase/app';
1
javeedishaq

J'ai eu le même problème et je l'ai résolu en supprimant la déclaration d'importation de firebase:

import firebase from 'firebase'

et remplacez-le en créant une variable const globale dans mon composant qui sera initialisée une fois le montage terminé:

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

alors vous pouvez utiliser toutes les méthodes firebase en utilisant this.firebase ... exemple:

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

Ce problème vient avec firebase version 5.0.6. Essayez de déclasser la version de Firebase en exécutant cette commande.

$ npm install --save [email protected]

Après cela, si le problème persiste, essayez de passer à la version 4.9.1 du plug-in Firebase

$npm install --save [email protected]
0
Asiri Piyajanaka

Revenir à la version 5.0.3 de Firebase résout également le problème.

0
Ahmad Sadiq