0

我正在使用 React-virtualized 为我正在制作的社交媒体网络应用程序呈现大量无限的帖子列表。CellMeasurer 用于允许动态 rowHeights，如果窗口保持相同大小，它就可以工作。

我尝试按照文档进行操作，但如果调整了浏览器窗口的大小，我无法让它重新计算 rowHeights。这就是问题的样子，下面是代码： 重叠行图像

function InfiniteList({
  getDataFromServer,
  children,
  infiniteLoaderRef,
  list,
  updateList,
  empty,
  id,
}) {
  const [isNextPageLoading, setIsNextPageLoading] = useState(false);
  let listRef = useRef(null);
  let hasNextPage = true;

  const cache = new CellMeasurerCache({
    defaultHeight: 200,
    fixedWidth: true,
  });

  useEffect(() => {
    window.addEventListener("resize", () => updateRowHeight());

    return () => window.removeEventListener("resize", updateRowHeight);
  }, []);

  function updateRowHeight() {
    if (!listRef) {
      return;
    }
    console.log("recompute");
    cache.clearAll();
    listRef.current.recomputeRowHeights();
  }

  // Only load 1 page of items at a time.
  // Pass an empty callback to InfiniteLoader in case it asks us to load more than once.
  const loadMoreRows = isNextPageLoading ? () => {} : loadNextPage;

  // // Every row is loaded except for our loading indicator row.
  const isRowLoaded = ({ index }) => {
    if (!list) {
      return false;
    } else {
      return !hasNextPage || index < list.length;
    }
  };

  async function loadNextPage({ startIndex, stopIndex }) {
    setIsNextPageLoading(true);
    const rows = await getDataFromServer(startIndex, stopIndex);
    if (!list) {
      updateList(rows);
    } else {
      const newList = list.concat(rows);
      cache.clearAll();
      updateList(newList);
    }
    setIsNextPageLoading(false);
  }

  const rowCount = () => (!list ? 1 : list.length);

  function rowRenderer({ key, index, style, parent }) {
    if (!list) {
      return <TwitSpinner key={key} style={style} size={50} />;
    } else {
      return (
        <CellMeasurer
          cache={cache}
          columnIndex={0}
          key={key}
          parent={parent}
          rowIndex={index}
        >
          <div style={style}>
            {React.cloneElement(children, {
              listItem: list[index],
            })}
          </div>
        </CellMeasurer>
      );
    }
  }

  function noRowsRenderer() {
    return <React.Fragment>{empty}</React.Fragment>;
  }

  return (
    <InfiniteLoader
      key={id}
      isRowLoaded={isRowLoaded}
      loadMoreRows={loadMoreRows}
      rowCount={10000}
      minimumBatchSize={50}
      ref={infiniteLoaderRef}
    >
      {({ onRowsRendered, registerChild }) => (
        <WindowScroller>
          {({ height, isScrolling, onChildScroll, scrollTop }) => (
            <AutoSizer disableHeight>
              {({ width }) => (
                <List
                  autoHeight
                  height={height}
                  isScrolling={isScrolling}
                  onScroll={onChildScroll}
                  deferredMeasurementCache={cache}
                  onRowsRendered={onRowsRendered}
                  ref={(reference) => {
                    registerChild(reference);
                    listRef.current = reference;
                  }}
                  rowCount={rowCount()}
                  rowHeight={cache.rowHeight}
                  rowRenderer={rowRenderer}
                  scrollTop={scrollTop}
                  width={width}
                  overscanRowCount={5}
                  noRowsRenderer={noRowsRenderer}
                />
              )}
            </AutoSizer>
          )}
        </WindowScroller>
      )}
    </InfiniteLoader>
  );
}

export default InfiniteList;
4

1 回答 1

0

现在我从 loadNextPage 函数中删除了 cache.clearAll() 。

async function loadNextPage({ startIndex, stopIndex }) {
    setIsNextPageLoading(true);
    const rows = await getDataFromServer(startIndex, stopIndex);
    if (!list) {
      updateList(rows);
    } else {
      const newList = list.concat(rows);
      cache.clearAll(); //removed
      updateList(newList);
    }
    setIsNextPageLoading(false);
  }
于 2021-08-12T21:50:36.830 回答