在调整浏览器窗口大小时清除与react-window-infinite-loader一起使用的react-window列表的缓存

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>

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

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

我的问题：这样传递裁判会导致任何问题吗？还有其他方法吗？我可以重新计算我的列表并更改其结构以匹配列视图，但这是一项有点乏味的任务。

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

Answer 1

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