在调整浏览器窗口大小时，清除与react窗口无限加载程序一起使用的react窗口列表的缓存

Question

我以以下方式使用VariableSizedList以及InfiniteLoader和AutoSizer

{({ width, height }) => (
<InfiniteLoader
isItemLoaded={isItemLoaded}
itemCount={itemCount}
loadMoreItems={loadMore}
>
{({ onItemsRendered, ref }) => (
<VariableSizeList
itemCount={itemCount}
onItemsRendered={onItemsRendered}
// IMP: ref callback gets created on every render. Plus is it safe to do inner list modifications?
ref={(variableSizeList) => {
if (typeof ref === "function") {
ref(variableSizeList);
}
variableSizeListRef.current = variableSizeList;
}}
estimatedItemSize={getItemSizeForColumnLayoutIfRequired(
estimatedItemSize
)}
itemSize={getListItemSize}
itemData={{ listData, columnView, ...additionalDataProps }}
width={width}
height={height}
itemKey={itemKey}
overscanCount={overScanCount || 5}
outerRef={listContainerRef}
>
{children}
</VariableSizeList>
)}
</InfiniteLoader>

我的场景：对于宽度>tablet我正在连续渲染两个项目，但当条件失败时，我想将每个项目一个渲染到另一个下面。为此，我使用柔性包装将项目一个放在另一个下面，同时我更改每行的大小以适应包装。

我的问题：在检测和设置状态以指示列视图时，如果没有上述ref回调代码，我将无法重置列表。由于ref回调必须作为内联函数创建(以设置无限加载程序列表的ref(，因此在每次渲染时都会调用回调，这并不理想。另外，我不确定直接选择可变大小列表的ref并对其进行更改是否会影响无限列表组件的工作。

我的问题：像这样通过裁判会造成任何问题吗？还有别的办法吗？我可以重新计算列表并更改其结构以匹配列视图，但这是一项有点乏味的任务。

我尝试过的：获取无限列表的ref，并调用其唯一的公共方法resetloadMoreItemsCache(true)；然而，这不会重新计算我现有行的高度。

Answer 1

我认为如果使用variableSizeListRef.current.resetAfterIndex(0)，它应该重新计算高度。