React native - 对象在 firebase 版本 5.9.0 中作为 React 子项无效

【问题标题】：React native - objects are not valid as a React child in firebase version 5.9.0React native - 对象在 firebase 版本 5.9.0 中作为 React 子项无效
【发布时间】：2019-08-21 16:39:32
【问题描述】：

我已经在 SO 上阅读了这个 solution，但这没有用。

我在 photoList.js 文件中显示从 firebase 数据库获取的照片列表，就像在 Expo 中的 React-Native App 中一样

编辑 3：屏幕截图在 photoList.js 的第 267 行提到了错误。

item.authorId 是一个对象，不是单个值，错误在数据库中。

package.json的内容是

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "^32.0.0",
    "firebase": "^5.9.0",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
    "react-navigation": "^3.4.0"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.0.0"
  },
  "private": true
}

根据其一种解决方案，没有将firebase降级为5.0.3，而是通过更改为@firebase/app，不起作用。

import firebase from "@firebase/app";
import "@firebase/database";
import "@firebase/storage";
import "@firebase/auth";

我在GitHub 上的项目回购。

如何在不降级到旧版本的情况下呈现照片列表？ 因为我认为降级到旧版本不是面向未来的长期解决方案。

另外，我没有尝试这个解决方案，，

因为我将firebase、auth、数据库、存储导出到其他组件，

export const f = firebase;
export const database = firebase.database();
export const auth = firebase.auth();
export const storage = firebase.storage();

我该如何解决？

编辑 1：

我尝试将版本降级为5.0.3、4.9.1，但仍然出现错误

编辑 4：添加了 firebase db 的 JSON

{
  "comments" : {
    "eea-183-614-4d4-cc1" : {
      "022-e3d-018-4c5-149" : {
        "author" : "uhrn0DnB22X4f8BKvTMMi8Qii3I3",
        "comment" : "first comment on second photo",
        "posted" : 1553857722
      }
    },
    "photo-eg-id" : {
      "comment-id-1" : {
        "author" : "exampleUserId",
        "comment" : "Steven Paul Jobs was an American business magnate and investor. He was the chairman, chief executive officer, and co-founder of Apple Inc",
        "posted" : 1234567,
        "username" : "ganeshdeshmukh"
      }
    }
  },
  "photos" : {
    "25a-821-276-6fe-268" : {
      "author" : "uhrn0DnB22X4f8BKvTMMi8Qii3I3",
      "caption" : "cat",
      "posted" : 1553682794,
      "url" : "https://firebasestorage.googleapis.com/v0/b/exchange-o-gram-app.appspot.com/o/user%2Fuhrn0DnB22X4f8BKvTMMi8Qii3I3%2Fimg%2F25a-821-276-6fe-268.jpg?alt=media&token=8251d9fb-303c-419d-b1ec-d9e2ac2a1128"
    },
    "981-206-efe-582-dd3" : {
      "author" : "uhrn0DnB22X4f8BKvTMMi8Qii3I3",
      "caption" : "KTM",
      "posted" : 1553668177,
      "url" : "https://firebasestorage.googleapis.com/v0/b/exchange-o-gram-app.appspot.com/o/user%2Fuhrn0DnB22X4f8BKvTMMi8Qii3I3%2Fimg%2F981-206-efe-582-dd3.jpg?alt=media&token=35ac8cb6-7e1f-4e55-824b-518a2716f151"
    },
    "f12-cce-8fd-231-897" : {
      "author" : "uhrn0DnB22X4f8BKvTMMi8Qii3I3",
      "caption" : "GD",
      "posted" : 1553769294,
      "url" : "https://firebasestorage.googleapis.com/v0/b/exchange-o-gram-app.appspot.com/o/user%2Fuhrn0DnB22X4f8BKvTMMi8Qii3I3%2Fimg%2Ff12-cce-8fd-231-897.png?alt=media&token=463c7a53-9fa8-42af-bbfc-518dbda81bd0"
    },
    "photo-eg-id" : {
      "author" : "exampleUserId",
      "caption" : "I love Apple & Steve",
      "posted" : 1523002327,
      "url" : "https://source.unsplash.com/random/540x800/"
    }
  },
  "users" : {
    "exampleUserId" : {
      "avatar" : "http://i.pravatar.cc/300",
      "email" : "example.user@gmail.com",
      "photo-eg-id" : {
        "author" : "exampleUserId",
        "caption" : "I love Apple & Steve",
        "posted" : 1523002327,
        "url" : "https://source.unsplash.com/random/540x800/"
      },
      "posted" : 153723723,
      "url" : "https://source.unsplash.com/random/500x800/",
      "username" : "ganeshIsUsername"
    }
  }
}

编辑 2：添加终端输出。

Invariant Violation: Invariant Violation: Objects are not valid as a React child (found: object with keys {4aa-02d-7a3-2ee-2dc, f12-cce-8fd-231-897}). If you meant to render a collection of children, use an array instead.
    in RCTText (at Text.js:145)
    in TouchableText (at Text.js:268)
    in RCTView (at View.js:44)
    in AnimatedComponent (at TouchableOpacity.js:256)
    in TouchableOpacity (at photoList.js:267)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in CellRenderer (at VirtualizedList.js:687)
    in RCTView (at View.js:44)
    in RCTScrollView (at ScrollView.js:967)
    in AndroidSwipeRefreshLayout (at RefreshControl.js:167)
    in RefreshControl (at VirtualizedList.js:1049)
    in ScrollView (at VirtualizedList.js:1045)
    in VirtualizedList (at FlatList.js:662)
    in FlatList (at photoList.js:253)
    in RCTView (at View.js:44)
    in PhotoList (at feed.js:36)
    in RCTView (at View.js:44)
    in feed (created by SceneView)
    in SceneView (at createTabNavigator.js:39)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in ResourceSavingScene (at createBottomTabNavigator.js:113)
    in RCTView (at View.js:44)
    in ScreenContainer (at createBottomTabNavigator.js:103)
    in RCTView (at View.js:44)
    in TabNavigationView (at createTabNavigator.js:197)
    in NavigationView (created by Navigator)
    in Navigator (created by SceneView)
    in SceneView (at StackViewLayout.js:795)
    in RCTView (at View.js:44)
    in AnimatedComponent (at StackViewCard.js:69)
    in RCTView (at View.js:44)
    in AnimatedComponent (at screens.native.js:59)
    in Screen (at StackViewCard.js:57)
    in Card (at createPointerEventsContainer.js:27)
    in Container (at StackViewLayout.js:860)
    in RCTView (at View.js:44)
    in ScreenContainer (at StackViewLayout.js:311)
    in RCTView (at View.js:44)
    in AnimatedComponent (at StackViewLayout.js:307)
    in Handler (at StackViewLayout.js:300)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.js:79)
    in RCTView (at View.js:44)
    in Transitioner (at StackView.js:22)
    in StackView (created by Navigator)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at createAppContainer.js:388)
    in NavigationContainer (at App.js:61)
    in App (at withExpoRoot.js:22)
    in RootErrorBoundary (at withExpoRoot.js:21)
    in ExpoRootComponent (at renderApplication.js:34)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in AppContainer (at renderApplication.js:33)

This error is located at:
    in RCTText (at Text.js:145)
    in TouchableText (at Text.js:268)
    in RCTView (at View.js:44)
    in AnimatedComponent (at TouchableOpacity.js:256)
    in TouchableOpacity (at photoList.js:267)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in CellRenderer (at VirtualizedList.js:687)
    in RCTView (at View.js:44)
    in RCTScrollView (at ScrollView.js:967)
    in AndroidSwipeRefreshLayout (at RefreshControl.js:167)
    in RefreshControl (at VirtualizedList.js:1049)
    in ScrollView (at VirtualizedList.js:1045)
    in VirtualizedList (at FlatList.js:662)
    in FlatList (at photoList.js:253)
    in RCTView (at View.js:44)
    in PhotoList (at feed.js:36)
    in RCTView (at View.js:44)
    in feed (created by SceneView)
    in SceneView (at createTabNavigator.js:39)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in ResourceSavingScene (at createBottomTabNavigator.js:113)
    in RCTView (at View.js:44)
    in ScreenContainer (at createBottomTabNavigator.js:103)
    in RCTView (at View.js:44)
    in TabNavigationView (at createTabNavigator.js:197)
    in NavigationView (created by Navigator)
    in Navigator (created by SceneView)
    in SceneView (at StackViewLayout.js:795)
    in RCTView (at View.js:44)
    in AnimatedComponent (at StackViewCard.js:69)
    in RCTView (at View.js:44)
    in AnimatedComponent (at screens.native.js:59)
    in Screen (at StackViewCard.js:57)
    in Card (at createPointerEventsContainer.js:27)
    in Container (at StackViewLayout.js:860)
    in RCTView (at View.js:44)
    in ScreenContainer (at StackViewLayout.js:311)
    in RCTView (at View.js:44)
    in AnimatedComponent (at StackViewLayout.js:307)
    in Handler (at StackViewLayout.js:300)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.js:79)
    in RCTView (at View.js:44)
    in Transitioner (at StackView.js:22)
    in StackView (created by Navigator)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at createAppContainer.js:388)
    in NavigationContainer (at App.js:61)
    in App (at withExpoRoot.js:22)
    in RootErrorBoundary (at withExpoRoot.js:21)
    in ExpoRootComponent (at renderApplication.js:34)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in AppContainer (at renderApplication.js:33)

This error is located at:
    in NavigationContainer (at App.js:61)
    in App (at withExpoRoot.js:22)
    in RootErrorBoundary (at withExpoRoot.js:21)
    in ExpoRootComponent (at renderApplication.js:34)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in AppContainer (at renderApplication.js:33)
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:8779:6 in throwOnInvalidObjectType
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:9842:31 in reconcileChildFibers
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:10306:6 in reconcileChildren
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:10734:4 in updateHostComponent
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:14091:21 in performUnitOfWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:14129:41 in workLoop
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:14226:15 in renderRoot
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:15193:17 in performWorkOnRoot
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:15090:24 in performWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:15047:14 in performSyncWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:14925:19 in requestWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:14711:16 in scheduleWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:7700:17 in enqueueSetState
- node_modules/react/cjs/react.development.js:364:31 in setState
* app/components/photoList.js:134:22 in <unknown>
- node_modules/promise/setimmediate/core.js:37:14 in tryCallOne
- node_modules/promise/setimmediate/core.js:123:25 in <unknown>
- ... 8 more stack frames from framework internals

Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.%s, 
    in PhotoList (at feed.js:36)
    in RCTView (at View.js:44)
    in feed (created by SceneView)
    in SceneView (at createTabNavigator.js:39)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in ResourceSavingScene (at createBottomTabNavigator.js:113)
    in RCTView (at View.js:44)
    in ScreenContainer (at createBottomTabNavigator.js:103)
    in RCTView (at View.js:44)
    in TabNavigationView (at createTabNavigator.js:197)
    in NavigationView (created by Navigator)
    in Navigator (created by SceneView)
    in SceneView (at StackViewLayout.js:795)
    in RCTView (at View.js:44)
    in AnimatedComponent (at StackViewCard.js:69)
    in RCTView (at View.js:44)
    in AnimatedComponent (at screens.native.js:59)
    in Screen (at StackViewCard.js:57)
    in Card (at createPointerEventsContainer.js:27)
    in Container (at StackViewLayout.js:860)
    in RCTView (at View.js:44)
    in ScreenContainer (at StackViewLayout.js:311)
    in RCTView (at View.js:44)
    in AnimatedComponent (at StackViewLayout.js:307)
    in Handler (at StackViewLayout.js:300)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.js:79)
    in RCTView (at View.js:44)
    in Transitioner (at StackView.js:22)
    in StackView (created by Navigator)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at createAppContainer.js:388)
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:619:8 in warningWithoutStack
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:13205:6 in warnAboutUpdateOnUnmounted
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:14683:33 in scheduleWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:7700:17 in enqueueSetState
- node_modules/react/cjs/react.development.js:364:31 in setState
* app/components/photoList.js:134:22 in <unknown>
- node_modules/promise/setimmediate/core.js:37:14 in tryCallOne
- node_modules/promise/setimmediate/core.js:123:25 in <unknown>
- ... 8 more stack frames from framework internals

【问题讨论】：

  • 有什么理由不使用 Firestore 而不是 RealtimeDB？另外，您能否更改您的 renderItem 道具以显示静态文本字符串 for context
  • @David，1）我正在使用 firebase RealTimeDB 和 storage 来存储图像。不使用火库。 2) 实际上，我得到了错误 pt，item.author 不是任何值，而是一个对象。由于调用了错误的数据库路径，我犯了这个错误。很快我会更新关于确切错误的信息。目前，我正在重组数据库。
  • 很高兴您找到了问题的根源 :)
  • :) 很快我会正确解决它。

标签： reactjs firebase react-native firebase-realtime-database


【解决方案1】：

错误屏幕清楚地显示&lt;TouchableOpacity&gt; line 256, at photoList.js 的错误， 在 photoList.js 文件中，

在调用数据库时，

database
      .ref("users")
      .child(photoObj.author)
      .child("username") // now taking data's username
      .once("value")
      .then(snapshot => {
        console.log("db.ref('users/photoObj.author/username')\n", snapshot);

当在控制台上看到用户名为 null 时，它返回 null。

因为该字段在数据库中为空，并且该用户没有退出。

我在 photoId 中创建了带有 ID 的用户，然后它正确地获取了它。

另外，在&lt;Text&gt;item.author&lt;/Text&gt; 行，它返回的对象为item.author，无法在&lt;Text&gt; 中显示，并引发如上错误。

实际问题出在数据库中，当我忘记了用户的密码进行测试时，我删除了用户，然后我想创建另一个帐户进行测试。

但是当用户数据被删除时，它在 feed.js 中给出了空用户名。

目前的数据库结构如下。

TIL：每次前端都没有错误，否则有时我们会更改数据库结构，因此会出现错误，我们尝试使用更改数据库版本来修复firebase 5.0.3, 5.9.2, 4.9.1。

【讨论】：

    猜你喜欢
    • 2022-09-27
    • 1970-01-01
    • 2019-08-18
    • 1970-01-01
    • 2018-11-16
    • 2019-05-06
    • 2021-12-02
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode