0

我有一个 React Virtualized InfiniteList/Grid 组合，遵循文档中的基本模式（https://github.com/bvaughn/react-virtualized/blob/master/docs/InfiniteLoader.md#infiniteloader-and-grid） .

它工作得很好，除了两件事：

  • 如果我滚动得太快，而不是等待事情赶上，它会将滚动重置到网格的顶部

  • 该组合仅获取前 N 个结果（例如 125）......即使我有 859 个结果（即使我提供了 859 作为rowCount道具）

    • 这特别奇怪，因为它以 25 为增量获取，所以这意味着前 5 次一切正常，然后在第 6 次莫名其妙地失败。

我已经尽我所能弄清楚发生了什么，即使我用console.loganddebugger语句填充 React Virtualized 代码，我仍然无法弄清楚为什么它会在 125 个结果处停止（或者为什么快速滚动重置）。

任何更熟悉 React Virtualized 的人都可以将我指向代码中决定是继续获取​​还是停止（并可能将开始索引重置为 0）的位置？我可以说涉及到 InfiniteScrollonRowsRendered和scanForUnloadedRangesGrid onSectionRendered，但我仍然无法弄清楚值处理在哪里停止以及实际的“决定是否继续”逻辑开始。

4

1 回答 1

2

正如@brianvaughn 在他的评论中所建议的那样，InfinititeLoader组件（https://github.com/bvaughn/react-virtualized/blob/master/source/InfiniteLoader/InfiniteLoader.js）部分负责。每当呈现行时，_loadUnloadedRanges都会从 调用方法scanForUnloadedRanges，并处理加载scanForUnloadedRanges找到的范围。

然而，这只是等式的一部分。传入的参数onRowsRendered来自Grid. 该Grid _updateScrollTopForScrollToRow方法在用户滚动时被调用，该方法具有以下行：

const targetIndex = Math.max(0, Math.min(rowCount - 1, scrollToRow))

这targetIndex最终会影响加载哪些行，正如您所看到的，它取决于rowCount最初传入的行。

这就是给我带来问题的原因。我从InfiniteLoader+List组合开始，在该设置中，“行”对两个组件意味着相同的事情。但是，我随后切换到InfiniteLoader+Grid组合，而Grid“行”是行数组InfiniteLoader。换句话说，Grid“行”是一行单元格，而InfiniteLoader“行”是一个单元格。

我的计算方法rowCount已更改为使用Grid“行”的定义，但由于它被传递给InfinniteLoader我应该使用InfiniteLoader“行”的定义。换句话说，我应该只是返回numItems，而不是返回numItems/columnCount。

如果 React Virtualized 使用“items”属性InfiniteLoader而不是使用其他两个 React Virtualized 组件也使用的名称（具有两种不同的含义），那么所有这些都可以很容易地避免......但至少现在我有一个更好的了解这些组件的工作原理。

于 2017-02-15T19:29:15.717 回答