React Native - 对象作为 React 子对象无效(找到:带有键 {$$typeof, type, key, ref, props, _owner, _store} 的对象)

IT技术 javascript android reactjs react-native
2021-04-07 09:21:31

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

我很困惑如何解决这个问题。提前致谢。

6个回答

我今天遇到了这个问题。我对 5.0.3 和 5.0.4 之间的源代码进行了比较,发现导出发生了变化。我还发现,如果我将导入语句更改为以下内容,则它适用于最新版本 (5.3.0):

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

这样做可以让您避免require在代码中间,这是首选 imho。

为我工作。请记住更新导入 firebase 的其他文件(不仅仅是 App.js)
2021-05-31 09:21:31
为此,您需要导入您正在使用的 Firebase 的所有部分。我没有使用身份验证,而是使用存储和数据库。所以我不得不添加: import "@firebase/storage"; 导入“@firebase/数据库”;
2021-06-04 09:21:31
超级激动,我不必降级就可以使用它,非常感谢👍
2021-06-05 09:21:31
这个方法给了我错误:“_firebase.default.database 不是一个函数:(在 '_firebase.default.database()' 中,'_firebase.default.database' 是未定义的)”。好的,我修好了。我将作为单独的评论发布。
2021-06-14 09:21:31

试试这个:

从 App.js 中删除 firebase import 语句:

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

对我来说,这种解决方法非常有效!

@Celebertom,我如何在我的 config.js 文件中使用这个解决方案,它只是 js 文件而不是反应组件?Config.js 没有反应设置,那么,如何使用 componentWillMount()?链接是github.com/ganesh-deshmukh/exchange-o-gram/blob/master/app/...
2021-06-09 09:21:31
这对我有用,但不要错过下面的@GrokSrc 解决方案,它解释了如何仍然使用import->import firebase from '@firebase/app'import '@firebase/auth'
2021-06-16 09:21:31
非常感谢您的帮助,它有效!事实上,从 App.js 中删除 firebase import 语句并没有奏效,但是当我从我的组件 (LoginForm.js) 中删除这个导入并在我的 onButtonPress() 方法中创建这个 firebase 变量时,它终于启动了。
2021-06-18 09:21:31
谢谢@Clebertom
2021-06-19 09:21:31

这是 firebase 版本 5.0.6 的一个问题,而降级到一个版本将解决这个问题。例如试试这个

$ npm install --save firebase@5.0.4

如果 5.0.4 版也不适合您,请尝试 4.9.1 版,因为这是我正在使用的,它为我解决了这个问题

$npm install --save firebase@4.9.1

这对我有用。我开始使用 4.9.1 版本,问题消失了。
2021-06-13 09:21:31

尝试将导入语句更改为:

import firebase from '@firebase/app';

这对我有用!

$npm install --save firebase@4.9.1

在 firebase 文档中,他们说:

修复了 ES6 通配符导入破坏 Closure Compiler 的问题

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