时间戳

首页 > 解决方案 > React native - 对象作为 React 子对象无效（发现：带有键 {$$typeof, type, key, ref, props, _owner, _store} 的对象）

javascript - React native - 对象作为 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

解决方案

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

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

这样做可以让你避免require在你的代码中间，这是首选恕我直言。

推荐阅读