如何解决如何解决FlatList React Native中Key的问题
这是我第一次接触 React, 我的程序中有这个问题。请你帮我好吗? 我在我的应用程序中使用了 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()
}
}}
/>
任何提议
解决方法
将您的平面列表代码更改为此,
<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()
}
}}
/>
,
您可以为keyExtractor使用索引或索引与电影的任何属性的组合。在下面的示例中,我使用了索引并在同一行添加了注释,也可以用来代替索引。
<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()
}
}}
/>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。