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

【问题标题】：React Native FlatList jumps to the top when adding new itemsReact Native FlatList 添加新项目时跳到顶部
【发布时间】：2020-07-27 07:12:34
【问题描述】：

我正在尝试向 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 都会滚动回顶部

【问题讨论】：

看看这个stackoverflow.com/questions/52646021/…
我做了（也尝试了一些东西），但它似乎没有一个可靠的答案......
@EduardoPedroso 你能在世博小吃上发布一个可重复的例子吗？
可以加setPickupsGroups方法码
@MahdiN 只是一个 React 钩子。

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

【解决方案1】：

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

【讨论】：