使用react-virtualized滚动到底部时列表内容突然错位怎么办？

这个问题主要是因为动态高度计算和渲染不同步导致的，官方文档里提到过类似的情况。CellMeasurer 的核心机制是依赖于实际渲染的内容来测量高度，但如果你的数据是异步加载或者列表在滚动过程中触发了重新渲染，就可能导致测量值和实际渲染位置不一致。

解决这个问题可以从以下几个方面入手：

首先，确保 CellMeasurer 和 List 的配合是正确的。你需要在 rowRenderer 方法中显式调用 CellMeasurer 的测量逻辑。比如这样写：

rowRenderer = ({ index, key, parent, style }) => {

  const rowData = this.state.data[index];

  return (

    <CellMeasurer

      key={key}

      cache={this.rowMeasurer.cache}

      parent={parent}

      columnIndex={0}

      rowIndex={index}

    >

      {({ measure }) => (

        <div style={style} ref={measure}>

          {rowData.content}

        </div>

      )}

    </CellMeasurer>

  );

}

这里的关键点是 ref={measure}，它会在 DOM 元素挂载或更新时触发高度测量。如果没有这一步，CellMeasurer 的缓存可能不会及时更新。

其次，检查你的 RowMeasurer 类是不是少了 CellMeasurerCache。官方文档推荐使用 CellMeasurerCache 来管理动态高度，而不是自己手动维护一个对象。你可以改成这样：

this.rowMeasurer = new CellMeasurerCache({

  fixedWidth: true,

  defaultHeight: 50

});

然后在 List 的 rowHeight 属性中直接传入 this.rowMeasurer.rowHeight，不需要再自己实现 getHeights 方法。

另外，如果滚动到底部时数据还在加载，建议在数据加载完成后调用 List 的 recomputeRowHeights 方法。这个方法会强制重新计算所有行的高度，避免错位问题。比如：

this.setState({ data: newData }, () => {

  if (this.listRef) {

    this.listRef.recomputeRowHeights();

  }

});

最后，记得给 List 添加一个 ref，方便你调用它的实例方法：

<List

  ref={(ref) => (this.listRef = ref)}

  width={300}

  height={500}

  rowHeight={this.rowMeasurer.rowHeight}

  rowCount={this.state.data.length}

  rowRenderer={this.rowRenderer}

  overscanRowCount={3}

/>

总结一下，主要问题出在动态高度的测量和缓存没有正确同步。按照官方的最佳实践，改用 CellMeasurerCache，确保 CellMeasurer 的 measure 被正确调用，并在数据更新后调用 recomputeRowHeights 方法，基本就能解决错位的问题。这些改动都不复杂，但确实能让你少踩很多坑。

这个问题其实挺常见的，主要是因为动态高度计算和渲染之间的同步问题。react-virtualized 的 CellMeasurer 在处理动态高度时需要额外的配置来确保测量和渲染一致。

你的代码里用了 getHeights 方法返回一个函数，但这里有个潜在的问题：this.heights[index] 的值可能在滚动过程中还没有被正确设置，导致渲染时的高度和实际内容高度不匹配。尤其是快速滚动到底部时，CellMeasurer 还没来得及重新测量高度，列表就已经渲染了。

解决办法是调整 CellMeasurer 和 List 的配合方式，强制刷新高度缓存并重新测量。可以试试以下步骤：

1. 确保 CellMeasurer 的 resetMeasurements 方法在数据更新时被调用。这个方法会清空现有的高度缓存，让组件重新测量每一行的高度。

2. 修改你的 rowHeight 配置，直接使用 CellMeasurer 提供的 cache 对象，而不是自己维护一个 heights 对象。CellMeasurer 自带的缓存机制更可靠。

3. 在 List 组件上加一个 onScroll 事件监听器，当滚动到底部时手动触高度重新测量。

下面是修改后的代码示例：

import { List, CellMeasurer, CellMeasurerCache } from 'react-virtualized';



// 创建一个 CellMeasurer 的缓存对象

const cache = new CellMeasurerCache({

  fixedWidth: true, // 宽度固定

  defaultHeight: 50, // 默认高度

});



class MyListComponent extends React.Component {

  state = {

    data: [], // 你的数据

  };



  loadMoreData = () => {

    // 模拟加载更多数据

    const newData = [...this.state.data, ...Array(10).fill('new item')];

    this.setState({ data: newData });

    // 数据更新后重置高度缓存

    cache.clearAll();

  };



  handleScroll = ({ scrollTop, clientHeight, scrollHeight }) => {

    // 滚动到底部时触发加载更多逻辑

    if (scrollTop + clientHeight >= scrollHeight - 10) {

      this.loadMoreData();

    }

  };



  renderRow = ({ index, key, parent, style }) => {

    return (

      <CellMeasurer

        key={key}

        cache={cache}

        parent={parent}

        columnIndex={0}

        rowIndex={index}

      >

        <div style={style}>

          {this.state.data[index]}

        </div>

      </CellMeasurer>

    );

  };



  render() {

    return (

      <List

        width={300}

        height={500}

        rowCount={this.state.data.length}

        rowHeight={cache.rowHeight} // 使用缓存的高度

        rowRenderer={this.renderRow}

        onScroll={this.handleScroll} // 监听滚动事件

        overscanRowCount={3}

      />

    );

  }

}

关键点在于 CellMeasurerCache，它是专门为动态高度设计的，比你自己维护 heights 对象靠谱得多。另外，记得在数据更新或者滚动到底部时调用 cache.clearAll() 来清除缓存，避免高度错乱。

最后吐槽一句，动态高度这种需求真是让人头大，调试起来特别费劲，我都踩过无数次坑了。希望这段代码能帮你解决问题，别再被高度错位折磨了！