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.
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!
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.
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]
versuchen Sie, die Importanweisung folgendermaßen zu ändern:
import firebase from '@firebase/app';
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
"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';
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
});
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
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]
Durch das Zurücksetzen auf Firebase Version 5.0.3 wird das Problem ebenfalls behoben.