react-window fixedSizeGrid 与 react-window-infinite-loader

Question

我尝试将 react-window 的 fixedSizeGrid 与 react-infinite-loader 一起使用。如前所述，无限加载器不支持 fixedSizeGrid 的无限加载。所以我找到了 onItemsRendered 覆盖方法。现在我正在尝试用它渲染数据并加载到滚动条上。但是当我滚动时我的数据没有加载。这是我的 ThumbGrid 组件的片段，我传递了数据和 fetchMore(graphql)，即来自父组件的数据的总大小。谁能帮我解决这个问题。:

/*
* ThumbGrid Component
* 
*/
   <AutoSizer disableHeight>
      {({ width }) => {
        const columnCount = Math.floor(width / 175);
        return (
          <InfiniteLoad
            isItemLoaded={isItemLoaded}
            itemCount={100}
            loadMoreItems={fetchMore}
          >
            {({ onItemsRendered, ref }: any) => {
              const newItemsRendered = (gridData: any) => {
                const useOverscanForLoading = true;
                const {
                  visibleRowStartIndex,
                  visibleRowStopIndex,
                  visibleColumnStopIndex,
                  overscanRowStartIndex,
                  overscanRowStopIndex,
                  overscanColumnStopIndex
                } = gridData;

                const endCol =
                  (useOverscanForLoading || true
                    ? overscanColumnStopIndex
                    : visibleColumnStopIndex) + 1;

                const startRow =
                  useOverscanForLoading || true
                    ? overscanRowStartIndex
                    : visibleRowStartIndex;
                const endRow =
                  useOverscanForLoading || true
                    ? overscanRowStopIndex
                    : visibleRowStopIndex;

                const visibleStartIndex = startRow * endCol;
                const visibleStopIndex = endRow * endCol;

                onItemsRendered({
                  //call onItemsRendered from InfiniteLoader so it can load more if needed
                  visibleStartIndex,
                  visibleStopIndex
                });
              };
              return (
                <Grid
                  width={width}
                  height={height || 700}
                  columnWidth={105}
                  columnCount={columnCount}
                  itemData={{ list: data, columnCount }}
                  ref={ref}
                  innerElementType={innerElementType}
                  onItemsRendered={newItemsRendered}
                  rowCount={200}
                  rowHeight={264}
                >
                  {({columnIndex, rowIndex, data, style}) => {
                    const { list, columnCount } = data;
                    const item = list[rowIndex * columnCount + columnIndex];
                    return item ? <ThumbCard style={style} {...item} /> : null;
                  }}
                </Grid>
              );
            }}
          </InfiniteLoad>
        );
      }}
    </AutoSizer>

这是我的父组件：

export default function() {
....
function loadMore() {
  fetchMore({
    variables: {
      offset: data.artist.albums.items.length,
      limit: 10
    },
    updateQuery: {....}
  });
}

return (<div className="album-cell cell-block">
  <ThumbGrid
   data={data.artist.albums.items}
   height={1200}
   total={data.artist.albums.total}
   fetchMore={loadMore}
  />
</div>)
}

Answer 1

所以我终于在 Gerrit 的帮助下实现了。我应该将 prop 的 loadMore 函数直接传递给 fetchMore 方法，并且应该将 style 传递给 ThumbCard。同样令人困惑的是我试图用codesandbox做一个演示，它应该显示一些模拟数据然后它必须使用状态。我将其传递给 ThumbGrid，因此更新后的数据将触发 ThumbGrid 重新呈现。

react-window fixedSizeGrid 与 react-window-infinite-loader

react-window fixedSizeGrid with react-window-infinite-loader

javascript

reactjs

typescript

react-virtualized

react-window