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

Question

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

Les objets ne sont pas valides en tant qu'enfant React (trouvé: objet avec clés {$$ typeof, type, key, 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 du composant, sauf le 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 ne sais pas trop comment résoudre ce problème. Merci d'avance.

Answer 1

J'ai eu ce problème aujourd'hui. J'ai exécuté un diff sur le code source entre 5.0.3 et 5.0.4 et j'ai constaté que les exportations avaient changé. J'ai également constaté que si je modifiais l'instruction d'importation par ce qui suit, cela fonctionne avec la dernière version (5.3.0):

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

Le faire de cette façon vous permettra d'éviter les require au milieu de votre code, ce qui est préférable à mon humble avis.

Answer 2

Essaye ça:

Supprimez l'instruction d'importation Firebase d'App.js:

 import firebase from 'firebase'
 

Lors de l'initialisation de 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!

Answer 3

C'est un problème avec la version 5.0.6 de Firebase alors que la rétrogradation vers une version résoudra ce problème. Par exemple, essayez ceci

$ npm install --save firebase@5.0.4

Si la version 5.0.4 ne fonctionne pas pour vous, essayez la version 4.9.1 car c'est ce que j'utilise et cela a résolu ce problème pour moi

$npm install --save firebase@4.9.1

Answer 4

essayez de changer la déclaration d'importation en ceci:

 import firebase from '@firebase/app';
 

Answer 5

Ça marche pour moi!

 $npm install --save firebase@4.9.1
 

Dans les documents Firebase, ils disent:

Correction d'un problème où les importations de caractères génériques ES6 cassaient le compilateur de fermeture

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