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

问题描述

我已经在 SO 上阅读了这个解决方案，但这没有用。

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

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

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：添加JSON了 firebase db

{
  "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

标签： reactjsfirebasereact-nativefirebase-realtime-database

解决方案

错误屏幕<TouchableOpacity> 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);

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

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

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

此外，在 line <Text>item.author</Text>，它返回的对象为item.author，无法在中显示<Text>，并且它抛出了上面的错误。

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

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

目前的数据库结构如下。

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

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

问题描述

解决方案

推荐阅读