Antd Table Skip page：无数据答案

【问题标题】：Antd Table Skip page: No DataAntd Table Skip page：无数据
【发布时间】：2019-07-15 17:27:21
【问题描述】：

我打电话给offset-based paginated GraphQL endpoint。然后数据会显示在Antd Table 中。

现在，当点击页面时，一切都按预期工作：获取数据并将其附加到先前获取的数据中。但是，如果跳过页面，则会触发相同的例程。

例如

const previousData = [10, 11, 12]; // we are on page 1
// fetchMore && updateQuery, going to page 3 directly
const updatedData = [10, 11, 12, 30, 31, 32];

// Antd Table tries to access data on page 3, therefore at index behind item 32,
// as the page 3 items are in the place of page 2 items

这是一些预期的行为，到目前为止，我只对第一页和第三页的数据感兴趣，而不是第二页。但是，Antd Table 试图通过跳过前两页来显示第三页的数据，同时假设页面大小为每页 3 个项目。因此，pageSize * currentOffset = 3 * 1 = 6 它尝试访问超出范围的数据并显示“无数据”。

有没有办法绕过它？我做错了什么？

【问题讨论】：

标签： reactjs pagination apollo react-apollo antd

【解决方案1】：

哦。我的。上帝。我自己找到了答案。

问题是我自己像这样合并数据：

const mergedData = [...previousData, ...updatedData]

然后用它来展示。

显然，这不是要走的路。而是完全替换现有数据。

所以现在我在 Apollo fetchMore 中所做的是这样的：

updateQuery: (previousResult, { fetchMoreResult }) => fetchMoreResult,

现在，一切都按预期进行。

【讨论】：