React Virtualized CellMeasurer with List 间歇性地给出随机高度

问题描述

我遇到了 react-virtualized 的问题，当我尝试渲染 List 和 CellMeasurer 具有动态高度的项目并且我滚动列表时，高度间歇性地计算不正确（有时它们被正确测量，有时被错误测量）。有时会发生很少有项目占据列表中第一个项目的高度。当第一项的高度大于另一个时，我会看到元素之间有额外的空白，而当高度较小时，它们开始相互重叠。

添加一些我正在尝试实现的简约示例代码。任何帮助将不胜感激！

const Component = (props) => {

  const rowCacheRef = useRef(
    new CellMeasurerCache({
      fixedWidth: true,defaultHeight: DEFAULT_ROW_HEIGHT,keyMapper: (rowIndex: number): string => decoratedItemsRef.current[rowIndex]?.key,...cellMeasurerProps,})
  );


  const roWrenderer = ({ index,key,style: _rowStyles,parent }) => {
      const decoratedItem = decoratedItemsRef.current?.[index];
      return (
        <CellMeasurer key={key} cache={rowCacheRef.current} parent={parent} columnIndex={0} rowIndex={index}>
          {({ measure }): React.ReactElement | null => (
            <div key={key} style={_rowStyles}>
              <MyComponent />
            </div>
          )}
        </CellMeasurer>
      );
    };

  return (
    <List
      ref={listRef}
      height={height}
      width={width}
      autoHeight={autoHeight}
      scrollTop={scrollTop}
      isScrolling={isScrolling}
      rowCount={decoratedItemsRef.current.length}
      rowHeight={_rowHeight}
      roWrenderer={roWrenderer}
      deferredMeasurementCache={rowCache}
      onScroll={_onScroll}
      containerStyle={containerStyle}
      style={style}
      tabIndex={tabIndex}
      overscanRowCount={overscanRowCount}
    />
  );
}

const MainComponent = () => {
  return (
    <WindowScroller scrollElement={scrollElement}>
      {({ height,isScrolling,onChildScroll,scrollTop }): React.ReactElement => (
        <AutoSizer disableHeight>
          {({ width }): React.ReactElement =>
            <Component 
              width={width},height={height}
              scrollTop={scrollTop},isScrolling={isScrolling},autoHeight
            />
           }
          </AutoSizer>
        )}
      </WindowScroller>
      );
    }

解决方法

我遇到了类似的问题，我通过确保在行内容完全加载后调用 docker swarm update --task-history-limit ${int} 方法来修复它。

measure