Question

我已经阅读了solution的相关内容，但这没用。

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

编辑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降级为@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数据库

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

Answer 1

错误屏幕上清楚地显示了<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);

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

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

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

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

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

但是在删除该用户数据时，它在feed.js中提供了空用户名。

数据库的当前结构如下。

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

React Native-对象在Firebase 5.9.0版中作为React子代无效

1 个答案: