Реакция-окно fixedSizeGrid с реагированием-окно-бесконечный загрузчик

Question

Я пытался использовать ответные окна fixedSizeGrid с участием react-infinite-loader, Как уже упоминалось, проблема в infinite-loader не поддерживает fixedSizeGrid для бесконечной загрузки. Итак, я нашел onItemsRendered переопределить метод. Теперь я пытаюсь визуализировать данные с ним и загрузить на свиток. Но мои данные не загружаются при прокрутке. Вот фрагмент моего ThumbGrid компонент, который я передал data и 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, Также сбивало с толку то, что я пытался сделать демонстрацию с codeandbox, он должен показывать некоторые фиктивные данные, тогда он должен использовать состояния. Я передал его в ThumbGrid, чтобы обновленные данные вызывали повторную визуализацию ThumbGrid.