javascript - 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 更新查询不会导致您的屏幕重新渲染并且不会滚动到顶部..