reactjs - 重置/初始化 InfiniteLoader 的正确方法是什么

Question

我正在尝试使用InfiniteLoader来自react-virtualize库来显示一个可滚动列表，其中包含 textSearch顶部的输入字段(用于过滤列表条目)。

我使用的代码非常接近 InfiniteLoader Sample Code 。该列表工作正常，但我不确定如何重置/初始化 InfiniteLoader当 searchText已更改并且应显示(完全)新数据。

流程是这样的:

1. 列表首次打开，显示来自 redux store 的数据(工作正常)。
2. 用户变更 textSearch新数据被提取到 store
3. 此时，InfiniteLoader应该初始化(我尝试在 resetLoadMoreRowsCache 上调用 InfiniteLoader )
4. InfiniteLoader应该打电话loadMoreRows就像第一次一样并使用新数据重新渲染

我已经看到 INFINITELOADER DEMO具有相同的行为:通过单击“刷新缓存数据”，直到我开始滚动列表为止，不会发生任何事情。

所以我的问题:重置/初始化的正确方法是什么？

Answer 1

对于较新版本的 InfiniteLoader

自从这个问题发布以来，InfiniteLoader获得了一个自动重新加载数据的参数。您现在可以使用:

infiniteLoaderRef.resetLoadMoreRowsCache(true);

自动刷新缓存并获取新行。

对于旧版本的InfiniteLoader

InfiniteLoader 对正在渲染的一系列行使用react。 resetLoadMoreRowsCache method只是重置缓存数据。它不会自动请求加载一批行。

可以说应该如此。我不知道。如果应用程序状态发生变化，需要调用 resetLoadMoreRowsCache，用户代码似乎很容易自动加载第一批新数据。

无论如何，tl;dr 是你应该能够做到这一点:

infiniteLoaderRef.resetLoadMoreRowsCache(); // Reset the cache

loadMoreRows({ // Manually kick off the first batch
  startIndex: 0,
  stopIndex: 20 // Or whatever
});

如果您认为可以改进默认行为，很高兴查看 PR 以更改默认行为。