React native - объекты недопустимы как дочерние элементы React (найдено: объект с ключами {$$ typeof, type, key, ref, props, _owner, _store})

Question

Я новичок в React Native и получаю сообщение об ошибке, приведенное ниже:

Объекты недопустимы как дочерние элементы React (найдено: объект с ключами {$$ typeof, type,ключ, ссылка, реквизит, _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>
        );
    }
}

Я довольнозапутался, как решить эту проблему.Заранее спасибо.

Answer 1

Я не понизил версию, мне просто нужно было добавить

import "@firebase/database";

Что означает, что вы импортируете каждый компонент Firebase, который хотите использовать ... (просто надеюсь, что это правильно)

но у меня так хорошо получилось

Answer 2

 "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';

Answer 3

Откат до FireBase версии 5.0.3 также решает проблему.

Answer 4

Эта проблема возникает в Firebase версии 5.0.6.Попробуйте понизить версию Firebase, выполнив эту команду.

$ npm install --save firebase@5.0.4

После этого, если проблема все еще существует, попробуйте понизить плагин Firebase до версии 4.9.1

$npm install --save firebase@4.9.1

Answer 5

попробуйте изменить оператор импорта следующим образом:

import firebase from '@firebase/app';

Answer 6

Это работает для меня!

$npm install --save firebase@4.9.1

В документах Firebase они говорят:

Исправлена ​​ошибка, из-за которой импорт подстановочных знаков ES6 ломал Closure Compiler

ССЫЛКА >> https://firebase.google.com/support/release-notes/js

Answer 7

У меня была та же проблема, и я решил ее, удалив оператор импорта из firebase:

import firebase from 'firebase'

и заменил его, создав глобальный const внутри моего компонента, который будет инициализирован после завершения компонентаmount:

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

, затем вы можете использовать все методы firebase, используя this.firebase ... пример:

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

Answer 8

У меня была эта проблема сегодня.Я запустил diff для исходного кода между 5.0.3 и 5.0.4 и обнаружил, что экспорт изменился.Я также обнаружил, что если я изменю оператор импорта на следующий, чтобы он работал с последней версией (5.3.0):

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

Выполнение этого таким образом позволит вам избежать require всередина вашего кода, который является предпочтительным imho.

Answer 9

Это проблема с Firebase версии 5.0.6, в то время как снижение до версии решит эту проблему. Например, попробуйте это

$ npm install --save firebase@5.0.4

Если версия 5.0.4 также не работаетдля вас, чем попробовать версию 4.9.1, так как это то, что я использую, и это решило эту проблему для меня

$npm install --save firebase@4.9.1

Answer 10

Попробуйте это:

Удалите оператор импорта firebase из 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();
...
}

Для меня этоОбходной путь работает очень хорошо!