如何解决 FlatList React native 中的 Key 问题

Question

这是我第一次接触 React，我的程序中有这个问题。你能帮我吗？我在我的应用程序中使用 TMDB API。

index.js:1 Warning: Encountered two children with the same key, `.6242`. 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()
    }
  }}
/>

任何命题

Answer 1

将你的 flatlist 代码改成这个，

<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()
        }
    }}
/>

Answer 2

you can use index or combination of index and any property of films for 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()
        }
    }}
/>

如何解决 FlatList React native 中的 Key 问题

How can resolve problem of Key in FlatList React native

javascript

reactjs

react-native

react-native-flatlist

flatlist