React native - 对象作为 React 子对象无效（发现：带有键的对象 $$typeof, type, key, ref, props, _owner, _store）

Posted 2023-02-22

【中文标题】React native - 对象作为 React 子对象无效（发现：带有键的对象 $$typeof, type, key, ref, props, _owner, _store）

【英文标题】：React native - objects are not valid as a React child (found: object with keys $$typeof, type, key, ref, props, _owner, _store)React native - 对象作为 React 子对象无效（发现：带有键的对象 $$typeof, type, key, ref, props, _owner, _store）

【发布时间】：2018-11-06 09:25:10

【问题描述】：

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

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

【问题讨论】：

请更具体。您能否尝试将您的代码大小减少到最小的示例，但仍然会因相同的错误而失败？

我分析了这段代码几个小时，我真的不知道问题出在哪里。如果我删除除 render() 之外的所有方法，问题就不会出现。

我也看不到第一手的问题，但我认为它必须与 标记之一有关。您能否尝试注释掉 组件及其子组件，看看是否仍然出现错误？

@dentemm 我在 中删除了这两个 标签，它没有任何影响。

您是否也尝试了错误消息的 标签？

【参考方案1】：

我没有降级我只是要添加

import "@firebase/database";

这意味着你导入了你想使用的每个 firebase 组件......（希望这是正确的）

但对我来说效果很好

【参考方案2】：

回滚到 firebase 5.0.3 版也可以解决问题。

【讨论】：

卡在旧版本上很糟糕，非常糟糕。

【参考方案3】：

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

【参考方案4】：

尝试将导入语句更改为：

import firebase from '@firebase/app';

【参考方案5】：

Firebase 5.0.6 版出现此问题。通过运行此命令尝试降级 firebase 版本。

$ npm install --save firebase@5.0.4

如果问题仍然存在，请尝试将 firebase 插件降级到版本 4.9.1

$npm install --save firebase@4.9.1

【参考方案6】：

这对我有用！

$npm install --save firebase@4.9.1

在 firebase 文档中，他们说：

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

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

【参考方案7】：

我遇到了同样的问题，我通过删除firebase的import语句解决了它：

import firebase from 'firebase'

并通过在我的组件内创建一个全局const 来替换它，一旦组件完成安装，它将被初始化：

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

然后您可以使用 this.firebase 来使用所有 firebase 方法... 示例：

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

【参考方案8】：

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

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

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

【讨论】：

此方法给我错误：“_firebase.default.database 不是函数：（在 '_firebase.default.database()' 中，'_firebase.default.database' 未定义）”。好的，我修好了。我将作为单独的评论发表。

为此，您需要为您正在使用的 Firebase 导入所有部件。我没有使用 Auth，而是使用了存储和数据库。所以我不得不添加： import "@firebase/storage";导入“@firebase/database”；

超级激动，我不必降级就可以让它工作，非常感谢?

为我工作。请记住更新导入 firebase 的其他文件（不仅仅是 App.js）

【参考方案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

【讨论】：

这对我有用。我开始使用 4.9.1 版本，问题就消失了。

【参考方案10】：

试试这个：

从 App.js 中移除 firebase 导入语句：

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

对我来说，这种解决方法效果很好！

【讨论】：

非常感谢您的帮助，它有效！事实上，从 App.js 中删除 firebase 导入语句并没有奏效，但是当我从组件 (LoginForm.js) 中删除此导入并在我的 onButtonPress() 方法中创建此 firebase 变量时，它终于启动了。

谢谢@Clebertom

这对我有用，但不要错过下面@GrokSrc 的解决方案，它解释了如何仍然使用import -> import firebase from '@firebase/app' 和import '@firebase/auth'

@Celebertom，如何在我的 config.js 文件中使用此解决方案，它只是 js 文件而不是 react-component？ Config.js 没有 react 设置，如何使用 componentWillMount()？链接是github.com/ganesh-deshmukh/exchange-o-gram/blob/master/app/…