React Native FlatList 添加新项目时跳到顶部

Question

I'm trying to add an Infinite Scroll feature to a FlatList:

<FlatList
   data={pickupsGroups}
   renderItem={({item , index}: {item: PickupGroup, index: number}) => {
                    return <PickingCard group={item} onPress={onPressPickup}/>
   }}
   onRefresh={onRefresh}
   keyExtractor={item => `${item?.title}-${item?.totalSku}`}
   refreshing={refreshing}
   onEndReached={() => {
     setPage(page + 1)
   }}
   onEndReachedThreshold={0.1}
/>

when the page changes, I run a GraphQL query:

    const {loading} = useQuery(MY_GROUPS, {
        variables: {limit: 10, page},
        fetchPolicy: "network-only",
        onCompleted: data => {
            setPickupsGroups(pickupsGroups.concat(data.myPickupGroups.pickupGroups))
        }
    })

But every time I add new items to pickupGroups , the FlatList scrolls back to the top

Answer 1

Actually when you call method setPickupsGroups in onCompleted Method, it causes screen to re-render, try using a global variable for pickUpGroups, or if you are using apollo graphQL, then from your graphQL server try sending hasMore, and in app side call fetchMore Update Query which will not cause your screen to re-render and it won't scroll to top..