wake-up-neo.com

Native React - Objekte sind nicht als untergeordnetes React gültig (gefunden: Objekt mit Schlüsseln {$$ typeof, type, key, ref, requisiten, _owner, _store})

Ich bin neu in "React Native" und erhalte unten einen Fehler:

Objekte gelten nicht als untergeordnetes Reakt (gefunden: Objekt mit Schlüsseln {$$ typeof, type, key, ref, requisiten, _owner, _store}). Wenn Sie eine Sammlung von Kindern rendern möchten, verwenden Sie stattdessen ein Array.

Hier ist mein ganzer Code in der Komponentendatei außer dem 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>
        );
    }
}

Ich bin ziemlich verwirrt, wie ich das Problem beheben kann. Danke im Voraus.

14
scrazz

Versuche dies:

Entfernen Sie die Firebase-Importanweisung aus App.js:

import firebase from 'firebase'

Bei der Firebase-Initialisierung erstellen Sie eine Konstante:

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

Für mich funktioniert diese Problemumgehung sehr gut!

30
Clebertom

Ich hatte dieses Problem heute. Ich habe einen Unterschied zwischen 5.0.3 und 5.0.4 im Quellcode ausgeführt und festgestellt, dass sich die Exporte geändert haben. Ich habe auch herausgefunden, dass, wenn ich die Import-Anweisung folgendermaßen ändere, sie mit der neuesten Version (5.3.0) funktioniert:

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

Wenn Sie es auf diese Weise tun, können Sie die require in der Mitte Ihres Codes vermeiden, was imho bevorzugt wird. 

39
GrokSrc

Es ist ein Problem mit Firebase Version 5.0.6, während ein Downgrade auf eine Version dieses Problem beheben kann. Versuchen Sie dies beispielsweise

$ npm install --save [email protected]

Wenn Version 5.0.4 auch nicht für Sie funktioniert, versuchen Sie es mit Version 4.9.1, da ich dies verwende und dieses Problem für mich gelöst habe

$npm install --save [email protected]

15
Anwar Gul

versuchen Sie, die Importanweisung folgendermaßen zu ändern: 

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

Das funktioniert bei mir!

$npm install --save [email protected]

In firebase docs sagen sie:

Ein Problem wurde behoben, bei dem ES6-Platzhalterimporte den Closure Compiler brachen 

LINK >> 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"

}, Mit den oben genannten Abhängigkeiten konnte ich dieses Problem lösen, indem ich Folgendes tat

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

Ich hatte das gleiche Problem und löste es, indem ich die Import-Anweisung von Firebase entfernte:

import firebase from 'firebase'

und ersetzen Sie es durch Erstellen einer globalen const in meiner Komponente, die initialisiert wird, sobald die Komponente vollständig montiert ist:

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

dann können Sie alle Firebase-Methoden verwenden, indem Sie this.firebase ... verwenden. Beispiel:

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

Ich habe nicht herabgestuft, ich musste nur hinzufügen

import "@firebase/database";

Das bedeutet, dass Sie jede Firebase-Komponente importieren, die Sie verwenden möchten ... (hoffe nur, dass dies richtig ist)

aber es hat so gut geklappt für mich

0
joseph nkoro

Dieses Problem ist in der Firebase-Version 5.0.6 enthalten. Versuchen Sie, die Firebase-Version durch Ausführen dieses Befehls herunterzurüsten.

$ npm install --save [email protected]

Wenn das Problem weiterhin besteht, sollten Sie das Firebase-Plugin auf Version 4.9.1 herabstufen

$npm install --save [email protected]
0

Durch das Zurücksetzen auf Firebase Version 5.0.3 wird das Problem ebenfalls behoben.

0
Ahmad Sadiq