具有react无限加载器的react-window fixedSizeGrid

Question

我尝试在react-infinite-loader中使用react的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

所以我终于在格瑞特的帮助下取得了成功。我应该直接将道具的loadMore函数传递给fetchMore方法，并将style传递给ThumbCard。同样令人困惑的是，我试图用代码框做一个演示，它应该显示一些模拟数据，然后它必须使用状态。我将其传递给ThumbGrid，所以更新后的数据将触发ThumbGrid重新呈现。