web-dev-qa-db-ja.com

Reactネイティブ-オブジェクトはReact子としては無効です（見つかった：キー{$$ typeof、type、key、ref、props、_owner、_store}を持つオブジェクト）

私はReact Nativeが初めてであり、以下に引用したエラーが表示されます。

オブジェクトはReact子としては無効です（見つかった：キー{$$ typeof、type、key、ref、props、_owner、_store}を持つオブジェクト）。子のコレクションをレンダリングする場合は、代わりに配列を使用します。

ここに、スタイリングを除く、コンポーネントファイルに含まれるコード全体を示します。

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

私はその問題を解決する方法をかなり混乱しています。前もって感謝します。

javascriptandroidreactjsreact-native
26
scrazz

これを試して：

Firebase importステートメントをApp.jsから削除します。

import firebase from 'firebase'

Firebaseの初期化で定数を作成します。

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

私にとって、この回避策は非常にうまくいきます！

33
Clebertom

今日この問題がありました。 5.0.3から5.0.4の間でソースコードを比較したところ、エクスポートが変更されていることがわかりました。また、importステートメントを次のように変更すると、最新バージョン（5.3.0）で機能することがわかりました。

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

このようにすることで、コードの途中でrequireを避けることができます。

41
GrokSrc

Firebaseバージョン5.0.6の問題ですが、バージョンにダウングレードするとこの問題は解決します。たとえば、これを試してください

$ npm install --save [email protected]

バージョン5.0.4でも動作しない場合は、バージョン4.9.1を試してください。これは私が使用しているものであり、この問題を解決してくれました。

$npm install --save [email protected]

15
Anwar Gul

インポート文をこれに変更してみてください：

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

これは私のために働く！

$npm install --save [email protected]

Firebase docsでは、彼らはこう言います：

ES6ワイルドカードのインポートがClosure Compilerを壊していた問題を修正しました

リンク>> 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"

}、上記の依存関係で、次のようにしてこの問題を解決しました

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

私は同じ問題を抱えていましたが、firebaseのimport文を削除することで解決しました：

import firebase from 'firebase'

そして、コンポーネントのマウントが完了すると初期化されるグローバルconstをコンポーネント内に作成して置き換えます。

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

this.firebase ...を使用して、すべてのfirebaseメソッドを使用できます。例：

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

ダウングレードしませんでした

import "@firebase/database";

つまり、使用する各Firebaseコンポーネントをインポートするということです...（これが正しいことを願っています）

しかし、それは私にとってとてもうまくいった

0
joseph nkoro

この問題は、firebaseバージョン5.0.6に付属しています。このコマンドを実行して、Firebaseバージョンをダウングレードしてください。

$ npm install --save [email protected]

この後も問題が解決しない場合は、Firebaseプラグインをバージョン4.9.1にダウングレードしてください

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

Firebaseバージョン5.0.3にロールバックすると、問題も解決します。

0
Ahmad Sadiq