[英]How can resolve problem of Key in FlatList React native
It my first experience with React, I have this problem in my program.这是我第一次使用 React,我的程序中有这个问题。 Will you help me please?
请你帮帮我好吗? I use TMDB API in my application.
我在我的应用程序中使用 TMDB API。
index.js:1 Warning: Encountered two children with the same key, `.$106242`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
in div (created by View)
in View (created by ScrollView)
in div (created by View)
in View (created by ForwardRef)
in ForwardRef (created by ScrollView)
in ScrollView (created by VirtualizedList)
in VirtualizedList (created by FlatList)
in FlatList (at Search.js:71)
in div (created by View)
in View (at Search.js:65)
in Search (at App.js:8)
in App (created by ExpoRootComponent)
in ExpoRootComponent (created by RootComponent)
in RootComponent
in div (created by View)
in View (created by AppContainer)
in div (created by View)
in View (created by AppContainer)
in AppContainer
<FlatList
data={this.state.films}
keyExtractor={(item, index) => item.id.toString()}
renderItem={({ item }) => <Text> <FilmItem film={item} /> </Text>}
onEndReachedThreshold={0.5}
onEndReachedThreshold={0.5}
onEndReached={() => {
if (this.page < this.totalPages) { // On vérifie qu'on n'a pas atteint la fin de la pagination (totalPages) avant de charger plus d'éléments
this._loadFilms()
}
}}
/>
Any proposition任何提议
Change you flatlist code to this,将您的平面列表代码更改为此,
<FlatList
data = {this.state.films}
keyExtractor = {(item, index) => index+"_"+item.id.toString() }
renderItem={({item}) => <Text> <FilmItem film={item} /> </Text>}
onEndReachedThreshold={0.5}
onEndReachedThreshold={0.5}
onEndReached={() => {
if (this.page < this.totalPages) { // On vérifie qu'on n'a pas atteint la fin de la pagination (totalPages) avant de charger plus d'éléments
this._loadFilms()
}
}}
/>
you can use index or combination of index and any property of films for keyExtractor.
您可以为 keyExtractor 使用索引或索引与电影的任何属性的组合。 In below example I have used index and added comment on the same line which can also be used in place of index.
在下面的示例中,我使用了索引并在同一行添加了注释,它也可以用来代替索引。
<FlatList
data = {this.state.films}
keyExtractor = {(item, index) => index } // `${item.id.toString()}-${index}`
renderItem={({item}) => <Text> <FilmItem film={item} /> </Text>}
onEndReachedThreshold={0.5}
onEndReachedThreshold={0.5}
onEndReached={() => {
if (this.page < this.totalPages) { // On vérifie qu'on n'a pas atteint la fin de la pagination (totalPages) avant de charger plus d'éléments
this._loadFilms()
}
}}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.