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-infinite-loader的react-window fixedSizeGrid

1 个答案: