React-Native Flatlist 错误:对象作为 React 子项无效
2019-06-06
1509
只要我添加超过 1 条评论,就会出现此错误。我猜最新版本的 react-native 存在一些语法问题,因为它无法读取评论数组。请帮忙。
<FlatList
refreshing={this.state.refresh}
data={this.state.comments_list}
keyExtractor={(item, index) => index.toString()}
style={{ flex: 1, backgroundColor: "#eee" }}
renderItem={({ item, index }) => (
<View key={index} style={styles.flatListViewItems}>
<View style={{ padding: 5, width: "100%", flexDirection: "row", justifyContent: "space-between" }}>
<Text>time :{item.posted}</Text>
<TouchableOpacity
onPress={() =>
this.props.navigation.navigate("User", {
userId: item.authorId
})
}
>
<Text style={{ paddingRight: 5 }}>{item.author}</Text>
</TouchableOpacity>
</View>
<View style={{ padding: 5 }}>
<Text>{item.comment}</Text>
</View>
</View>
)}
/>
这是错误消息。{6cb9-63e3-ec5b-b764-6d3c, comment-id-1} 是两个评论的 id。comment-id-1 是第一条评论,当我创建新评论时,它会自动为其生成一个 id:6cb9-63e3-ec5b-b764-6d3c,现在由于数组中有两条评论,因此无法在屏幕上显示它:
Invariant Violation: Objects are not valid as a React child (found: object with keys {6cb9-63e3-ec5b-b764-6d3c, comment-id-1}). 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 comments.js:271)
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:977)
in ScrollView (at VirtualizedList.js:1062)
in VirtualizedList (at FlatList.js:662)
in FlatList (at comments.js:255)
in RCTView (at View.js:44)
in comments (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:57)
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 comments.js:271)
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:977)
in ScrollView (at VirtualizedList.js:1062)
in VirtualizedList (at FlatList.js:662)
in FlatList (at comments.js:255)
in RCTView (at View.js:44)
in comments (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:57)
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)
1个回答
文本组件无法呈现对象。就像错误显示的那样。 尝试更改此行:
<Text style={{ paddingRight: 5 }}>{item.author}</Text>
Mwongera808
2019-06-07