React Native应用程序不显示数据库项目

时间:2019-06-05 21:00:08

标签: javascript firebase react-native react-native-flatlist

我正在创建一个Instagram克隆应用程序,但存在此错误,一旦修复它,数据库中的项目就不会填充到该应用程序中。这不是firebase的问题,我对规则进行了三遍检查

代码:

<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 /

这不是firebase的问题,我对规则进行了三遍检查

请帮助。

0 个答案:

没有答案