Firestore 分页问题

Posted 2023-02-16

【中文标题】Firestore 分页问题

【英文标题】：Firestore pagination issue

【发布时间】：2022-01-12 02:05:37

【问题描述】：

构建一个 React Native 应用，我使用 Firebase 作为后端服务。

//最新版本的react-native-firebase

我使用 firestore 和他的工具（startAfter、endBefore 和 limit）为大量数据构建了一个简单的分页。 此分页使用下一个和上一个按钮，一切正常。

问题是无论是否有更多数据要加载，我都想禁用这些按钮。

至于前一个按钮创建一个状态以跟随用户在哪个页面，然后在状态为第1页时禁用按钮应该足够好。 （这可能不是最好的做法，如果您有更好的解决方案，请随时分享）

但是对于下一个按钮，它更难。 我做了一些研究，发现了一些解决方案，比如使用限制数。如果限制小于页面中显示的数据数量，则禁用该按钮。 它有效，但我的问题是如果限制 = 页面中的数据数怎么办？之后不再需要加载数据。

更准确地说，让我们举个例子限制 = 9 / 显示的数字数据 = 7 => 按钮禁用 ✅ 限制 = 9 / 显示的数字数据 = 9 => 按钮仍处于活动状态❌（这 9 个元素是最后一个静止的元素）

我正在考虑将我的调用更改为将限制设置为 10，而不是目前的 9。并且仍然每页只显示 9 个元素（仍然跟踪 lastVisible 道具的第 9 个元素，以便从它而不是从第 10 个元素调用 startAfter）。然后检查这第 10 个元素是否存在以禁用下一个按钮。 但这都是理论，就目前而言，如果不破坏我的 endBefore 和 startAfter 调用太多，我看不到这样做的方法。

我想听听您对此解决方案的看法，也许您能帮助我正确使用它。或者，如果您有其他解决方案来实现我的目标

感谢您的宝贵时间

【参考方案1】：

您描述的技巧确实是解决此问题的正常方法。因此，在当前页面上加载比您需要的多一个文档，然后检查该文档是否存在（但不显示其内容）以确定是否显示/启用按钮以转到下一页。

【讨论】：

谢谢先生的回答！因此，我计划使用 pop() 获取此文档，这将允许我从我要显示的数组中删除最后一个文档，并保存它以检查它是否存在。然后在 snapshot.docs[snapshot.docs.lenght - 2] 获取 startAfter/endBefore 的实际 lastVisible 文档，以获取第 9 个而不是第 10 个

听起来不错@DimitriEnjelvin ? --- 如果您在执行此操作时遇到问题，我建议您使用minimal repro 发布一个新问题（请阅读链接，因为它非常有用）。另请查看：What should I do when someone answers my question?