我正在创建一个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的问题,我对规则进行了三遍检查
请帮助。