react-virtualized InfiniteLoader/List - 使用 AJAX 的工作示例答案

【问题标题】：react-virtualized InfiniteLoader/List - working example using AJAXreact-virtualized InfiniteLoader/List - 使用 AJAX 的工作示例
【发布时间】：2018-07-13 07:09:18
【问题描述】：

我正在做一个 React/Redux 项目，需要实现一个虚拟化/无限加载列表。 react-virtualized 似乎打算完成这项工作，但即使在阅读了所有可用的文档并阅读了许多 StackOverflow 帖子之后，我也无法让它工作或找到对组件实际如何运作的机制的清晰解释工作。

我看过的主要例子是：

https://github.com/bvaughn/react-virtualized/blob/master/docs/creatingAnInfiniteLoadingList.md

https://github.com/bvaughn/react-virtualized/blob/master/docs/InfiniteLoader.md#examples

我遇到的主要问题是：

目前还不清楚在初始加载/渲染情况下如何触发加载程序来调用loadMoreRows()。典型的场景是，我们将组件设计为通过在初始渲染时调用loadMoreRows() 来使用数据初始化自身。实现这一点所需的配置值并不明显。
尚不清楚rowCount 属性是用于表示已加载 行的当前状态（数据块/页中的行数），还是总计数完整的行数据集。而且，无论哪种情况，在进行初始 AJAX 加载调用之前都无法知道这些，那么设置 rowCount 的初始值的目的是什么？

我尝试将各种示例中的代码放入我的项目中，但我从未看到有人调用过loadMoreRows。我认为需要一个充实的示例来演示一个非常典型的用例 a) 最初呈现一个空列表，然后触发初始数据加载调用； b) 更新rowCount 属性，以及何时/何地执行此操作； c) 管理代表当前数据块/页面的当前加载的数据集。

任何指针将不胜感激。

【问题讨论】：

行数应该是数据集中的总行数；这会通知 VirtualizedTable 如何呈现滚动条。
一个确切说明什么不起作用的代码示例将帮助人们回答您的问题
我建议查看此目录中的 InfiniteLoader.example.js 和 InfiniteLoader.jest.js 文件以获取使用它的示例 github.com/bvaughn/react-virtualized/tree/master/source/…
@brianvaughn InfiniteLoader.example.js 是我看到的第一个示例，因为它在项目文档中。该示例与基本的 AJAX 数据加载场景不太相关 - 该示例似乎正在跟踪某种加载的RowsMap 中的数据，并且正在使用具有超时和 Promise 的假数据。我无法辨别该示例的各个部分在做什么，或者如何将其转换为更典型的 AJAX 请求场景。例如 - 示例中 Promise 的目的是什么？你怎么知道总共有多少行数据？等等。你能指出一个 AJAX 示例吗？
@brianvaughn 我现在正在查看 InfiniteLoader.jest.js，有些部分没有意义。具体来说：在describe('InfiniteLoader') 中，有一个defaultIsRowLoaded() 正在测试return !!isRowLoadedMap[index] - 但isRowLoadedMap 从未被修改过，也就是说，没有任何东西被设置到其中 - 那么这是如何工作的呢？尚不清楚isRowLoaded 测试是否在做任何事情。

标签： reactjs react-virtualized

【解决方案1】：

loadMoreRows 作为道具传递给InfiniteLoader（您可以在示例中看到）。它不是手动调用的，它由InfiniteLoader和List内部使用，向下滚动时自动调用。

rowCount 可以同时具有这两种行为。您的 API 可以在不获取所有项目的情况下知道有多少项目，或者它不能。 rowCount 只是告诉List 有多少行。

因此，例如，假设我们有 100 家商店，我们的第一次获取给了我们前 10 家。同样的响应应该说明是否还有更多的商店需要获取。另一个获取可以告诉我们总共有 100 家商店。有了这个，我们可以使用总数 100 作为rowCount（通过查询商店的总数，而不是全部获取）或者我们可以使用 10 + 1 作为rowCount，作为第一个fetch 告诉我们还有更多商店要加载。

这是什么意思？

如果我们加载了前 10 个商店，并使用 rowCount = 100，InfiniteLoader 将显示 100 行，但只有前 10 个有任何内容，其余显示“正在加载”行占位符零件。当您向下滚动时，会出现“尚未加载”的行，InfiniteLoader 会调用 loadMoreRows 函数来加载更多行。

另一方面，如果我们使用rowCount = 10 + 1，InfiniteLoader 将只显示 11 行，只有最后一行是“正在加载”行占位符组件。当loadMoreRows 被调用时，rowCount 将是items.length + 1 === 20 + 1。

总结

loadMoreRows 并不意味着手动调用。当视口中显示未加载的行时，InfiniteLoader 会自动调用它。所以最初rowCount 可能只是1，不会加载任何行，并且会调用loadMoreRows。

rowCount 可以是 currentItems.length + (moreToBeLoaded ? 1 : 0) 或 totalItems。不同之处在于向用户显示的内容，“糟糕，加载的内容结束，等待更多”或“看，这些都是存在的项目，但还没有”还没加载，等他们加载"

【讨论】：

非常感谢您。这个答案将是对文档的一个很好的补充。这是有关如何使用loadMoreRows 和rowCount 的重要信息。您是否有一个通用的工作示例，或者您能解释一下isRowLoaded 是如何适应的，以及为什么有些示例显示了用于检测加载行的本地行管理？而且，isRowLoaded 究竟是什么意思？在某些示例中，它看起来只是测试本地列表中的index 是否为非空，但在第一次加载后总是如此，即使下一次加载未完成。
欢迎任何人提交 PR 以改进文档。（我喜欢这样的 PR。）文档很难编写并且需要大量时间来维护。 WRT 你的问题“isRowLoaded 的真正含义是什么”- 显而易见，也许可以查看文档的这一部分：github.com/bvaughn/react-virtualized/blob/master/docs/…
@cfraser 你能看看stackoverflow.com/questions/53446274/…。我已经尝试了所有解决方案以使其仍然工作，isRowLoaded 和 loadMoreRows 都没有被调用。