调用 onEndReached 时 FlatList 跳转到列表顶部答案

【问题标题】：FlatList jumping to top of list when onEndReached called调用 onEndReached 时 FlatList 跳转到列表顶部
【发布时间】：2021-08-31 06:15:42
【问题描述】：

我有一个从 API 获取作业列表的 FlatList。当滚动到达列表末尾时，将从 API 获取下一组作业并附加到作业列表中。

下面是FlatList的代码

<View style={localStyles.container}>
          <FlatList
            data={jobList.jobs}
            renderItem={renderJobList}
            keyExtractor={item => "" + item.jid}
            onEndReachedThreshold={0.2}
            onRefresh={() => { getJobsList(true) }}
            refreshing={fetchingStatus}
            extraData={jobList.jobs, fetchingStatus, savedIds, stateChanged}
            ListFooterComponent={<ProgressIndicator inProgress={fetchingStatus} />}
            onEndReached={() => {
              getJobsList(false);
            }} />
        </View>

jobList、fetchingStatus、savedIds、stateChanged——这4个是状态变量

在JobsListClass中，下面是追加数据的代码-

        request.processRequest().then((value) => {
            this.jobs = this.jobs.concat(value.jarr)
            ...
            this.notify();
        }).catch((error) => {
            console.log("campus err", error)
            ...
            this.notify();
        });

试过 Array.prototype.push.apply(this.jobs, value.jarr);而不是上面代码中的jobs.concat，但没有帮助。

【问题讨论】：

标签： react-native pagination react-native-flatlist

【解决方案1】：

我看不出到底是什么导致了跳跃，我需要更多代码来确定发生这种情况的位置。

看看无限滚动博览snack

【讨论】：

我看了看，无限滚动不是问题。每当调用 onEndReached 时，都会获取新数据并将其附加到我的原始数据中。所以数据方面没有问题。只是添加新数据时扁平列表会跳到顶部。
你能发一份完整的样本吗？
我修改了无限滚动博览会小吃并重新创建了我的问题。在我的其余代码中，当我附加数据时，我正在更改状态变量 fetchingStatus 的值以及 jobList.jobs。这些共同导致列表重新呈现，因此在发生分页时列表总是从顶部开始。
问题解决了吗？
是的，我已经解决了这个问题