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

【问题标题】：How can resolve problem of Key in FlatList React native如何解决FlatList React native中的Key问题
【发布时间】：2021-05-14 22:42:42
【问题描述】：

这是我第一次使用 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()
    }
  }}
/>

任何提议

【问题讨论】：

请清楚说明您的问题。你想达到什么目的？到目前为止你尝试过什么？
您的 state.films 数组应该包含 id 属性的唯一值，如果不是，您可以尝试其他一些唯一属性或索引。
好吧，您的数组中有一些数据具有重复的id 属性。修复您的数据或在兄弟姐妹中选择更好、更独特的属性。

标签： javascript reactjs react-native react-native-flatlist flatlist

【解决方案1】：

您可以将索引或索引与电影的任何属性的组合用于 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()
        }
    }}
/>

【讨论】：

【解决方案2】：

将您的平面列表代码更改为此，

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

【讨论】：