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

debugcn 发表于 Dev

萨拉米

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。