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

Question

我正在尝试向 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}
/>

当page更改时，我运行 GraphQL 查询：

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

但每次我向 中添加新项目时pickupGroups，FlatList 都会滚动回顶部

Answer 1

实际上，当您在 onCompleted 方法中调用 setPickupsGroups 方法时，它会导致屏幕重新渲染，请尝试为 pickUpGroups 使用全局变量，或者如果您使用的是 apollo graphQL，则从您的 graphQL 服务器尝试发送 hasMore，并在应用程序端调用 fetchMore Update查询不会导致您的屏幕重新渲染，也不会滚动到顶部。