Приложение React Native не показывает элементы базы данных - PullRequest
Новая
       19

Приложение React Native не показывает элементы базы данных

1 голос
/ 06 июня 2019

Я создаю приложение-клон в Instagram, и у меня возникает эта ошибка, после того как я исправлю ее, элементы из моей базы данных не будут добавлены в приложение. Это не проблема пожарной базы, я трижды проверил свои правила

Код: 

<FlatList
    refreshing={ this.state.refresh }
    onRefresh={ this.loadNew }
    data={ this.state.photo_feed }
    keyExtractor={ (item, index) => index.toString() }
    renderItem={({item,index}) => (

        <View key={ index }>

            <View>
                <Text>{item.posted}</Text>
                <TouchableOpacity onPress={ () => this.props.navigation.navigate('User', {userId: item.authorId})}>
                    <Text>{ item.author }</Text>
                </TouchableOpacity>
            </View>

            <View>
                <Image 
                    source={ {uri: item.url} }                       
                />
            </View>

            <View>
                <Text>{item.caption}</Text>
                <TouchableOpacity onPress={ () => this.props.navigation.navigate('Comments', {photoId: item.id})}>
                    <Text>View Comments</Text>
                </TouchableOpacity>
            </View>

         </View> 

    )}
/>

Код ошибки: 

Invariant Violation: Invariant Violation: Objects are not valid as a React child (found: object with keys {9d47d9fd-d1e0-82a0-965a-5e60-230c-04f2, cacddbc4-440b-0d5f-fa74-7e01-d823-ea62, photo-example-id}). 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:161)
    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:149)
    in RCTView (at View.js:44)
    in PhotoList (at feed.js:33)
    in RCTView (at View.js:44)
    in feed (at SceneView.js:9)
    in SceneView (at createTabNavigator.js:39)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in ResourceSavingScene (at createBottomTabNavigator.js:121)
    in RCTView (at View.js:44)
    in ScreenContainer (at createBottomTabNavigator.js:111)
    in RCTView (at View.js:44)
    in TabNavigationView (at createTabNavigator.js:197)
    in NavigationView (at createNavigator.js:61)
    in Navigator (at SceneView.js:9)
    in SceneView (at StackViewLayout.tsx:899)
    in RCTView (at View.js:44)
    in AnimatedComponent (at StackViewCard.tsx:93)
    in RCTView (at View.js:44)
    in AnimatedComponent (at screens.native.js:59)
    in Screen (at StackViewCard.tsx:80)
    in Card (at createPointerEventsContainer.tsx:95)
    in Container (at StackViewLayout.tsx:971)
    in RCTView (at View.js:44)
    in ScreenContainer (at StackViewLayout.tsx:383)
    in RCTView (at View.js:44)
    in AnimatedComponent (at StackViewLayout.tsx:379)
    in Handler (at StackViewLayout.tsx:372)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.tsx:103)
    in RCTView (at View.js:44)
    in Transitioner (at StackView.tsx:40)
    in StackView (at createNavigator.js:61)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at createAppContainer.js:429)
    in NavigationContainer (at App.js:55)
    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:161)
    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:149)
    in RCTView (at View.js:44)
    in PhotoList (at feed.js:33)
    in RCTView (at View.js:44)
    in feed (at SceneView.js:9)
    in SceneView (at createTabNavigator.js:39)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in ResourceSavingScene (at createBottomTabNavigator.js:121)
    in RCTView (at View.js:44)
    in ScreenContainer (at createBottomTabNavigator.js:111)
    in RCTView (at View.js:44)
    in TabNavigationView (at createTabNavigator.js:197)
    in NavigationView (at createNavigator.js:61)
    in Navigator (at SceneView.js:9)
    in SceneView (at StackViewLayout.tsx:899)
    in RCTView (at View.js:44)
    in AnimatedComponent (at StackViewCard.tsx:93)
    in RCTView (at View.js:44)
    in AnimatedComponent (at screens.native.js:59)
    in Screen (at StackViewCard.tsx:80)
    in Card (at createPointerEventsContainer.tsx:95)
    in Container (at StackViewLayout.tsx:971)
    in RCTView (at View.js:44)
    in ScreenContainer (at StackViewLayout.tsx:383)
    in RCTView (at View.js:44)
    in AnimatedComponent (at StackViewLayout.tsx:379)
    in Handler (at StackViewLayout.tsx:372)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.tsx:103)
    in RCTView (at View.js:44)
    in Transitioner (at StackView.tsx:40)
    in StackView (at createNavigator.js:61)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at createAppContainer.js:429)
    in NavigationContainer (at App.js:55)
    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:55)
    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)

Ключи: {9d47d9fd-d1e0-82a0-965a-5e60-230c-04f2, cacddbc4-440b-0d5f-fa74-7e01-d823-ea62, photo-example-id} являются тремя примерами фотографий, которые я загрузил

Если я не изменю: data = {this.state.photo_feed} на data = {this.state.photo_feed.toString ()}, ошибка не исчезнет

Однако, как только я добавляю .toString (), ни одна из фотографий не загружается из хранилища базы данных в приложение. Они загружаются в базу данных через приложение, но не отображаются:

Фото фида:

https://ibb.co/fSxQn84 ^ Вещи в красном должны быть там, где должны загружаться компоненты базы данных: item.author/posted/

Это не проблема пожарной базы, я трижды проверил свои правила

Пожалуйста, помогите.

...