React native — объекты недействительны в качестве дочерних элементов React в версии firebase 5.9.0

Я прочитал этот решение на SO, но это не сработало.

Я показываю список фотографий, загружаемых из базы данных firebase, как в приложении React-Native в Expo, в файле 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";

мой проект-репо на Гитхаб.

Как я могу отобразить список фотографий, не переходя на более старые версии? потому что я думаю, что переход на более старые версии не является перспективным и долгосрочным решением.

также я не пробовал это решение, React native — объекты недействительны в качестве дочерних элементов React в версии firebase 5.9.0 ,

потому что я экспортирую 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" : "[email protected]",
      "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 для отображения статической строки текста для контекста

— 31.03.2019 18:26

@David, 1) Я использую Firebase RealTimeDB и хранилище для хранения изображений. магазин огня не используется. 2) на самом деле я получил ошибку pt, item.author не является значением, а является объектом. Я сделал эту ошибку из-за вызова неправильного пути к базе данных. скоро я сообщу о точной ошибке. в настоящее время я реструктуризирую db.

— 31.03.2019 19:10

рад, что вы нашли источник проблемы :)

— 31.03.2019 19:29

:) скоро я решу это правильно.

— 31.03.2019 19:29

reactjs firebase react-native firebase-realtime-database

31.03.2019 11:17

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

427

Ответы 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.info("db.ref('users/photoObj.author/username')\n", snapshot);

он возвращал ноль, когда на консоли было видно, что имя пользователя равно нулю.

потому что это поле было пустым в базе данных, и этот пользователь не вышел.

Я создал пользователя с идентификатором в photoId, затем он правильно его извлек.

Кроме того, в строке <Text>item.author</Text> он возвращал объект как item.author, который не может отображаться в <Text>, и выдавал ошибку, как указано выше.

на самом деле проблема была в базе данных, я удалил пользователя, когда не помнил его пароль для тестирования, тогда я подумал создать еще одну учетную запись для его тестирования.

но он дал нулевое имя пользователя в feed.js, когда эти пользовательские данные были удалены.

Текущая структура базы данных выглядит следующим образом.

screenshot

TIL: Каждый раз, когда во внешнем интерфейсе нет ошибок, иногда мы вносим изменения в структуру базы данных и, таким образом, получаем ошибки, и мы пытаемся исправить их, используя изменение версий базы данных как firebase 5.0.3, 5.9.2, 4.9.1.

01.04.2019 17:10

Другие вопросы по теме

Firebase Realtime DB – как отображать индикатор выполнения при просмотре изображения, пока изображение не загрузится и не исчезнет после успешной загрузки изображения?

Ошибка сборки с «com.android.tools.r8.utils.AbortException: ошибка: тип программы уже присутствует: com.google.firebase.FirebaseApp»

Как вызвать метод в классе MainActivity из класса службы обмена сообщениями Firebase?

Получите среднее значение базовой функции огня, найдите среднее значение желаемых узлов

У меня проблема с отображением прямоугольников svg

Развертывание функций Firebase с помощью Google Cloud Build

Как ограничить создание документов на основе поля в другой коллекции?

Метод Firebase .on("value") дает мне нулевую ошибку, когда я загружаю свою страницу. Реф не существует

Одновременное резервирование временного интервала в базе данных Firebase Real Time (проблема перезаписи)

Ошибка nil при получении изображения из хранилища Firebase

React native — объекты недействительны в качестве дочерних элементов React в версии firebase 5.9.0

Ответы 1

Другие вопросы по теме

Похожие вопросы