React-Virtualized Grid图片加载后未渲染，需滚动才显示的问题

看起来你遇到的核心问题是首次渲染时图片加载完成后没有触发Grid单元格的重渲染，或者onSectionRendered在初始渲染阶段没有正确触发导致图片没加载。结合你的代码和描述，我整理了几个针对性的解决方案：

1. 手动触发初始可见区域的图片加载 #

React-Virtualized的onSectionRendered并不总是在组件首次渲染时自动调用（尤其是当Grid内容刚加载完成时）。你需要在loadHistory获取到数据后，手动加载当前可见行的图片：

步骤： #

• 给Grid添加ref，用于获取可见行范围：

render() {
  const { height, rowHeight } = this.props;
  const { width, spotHistoryData } = this.state;
  return(
    <Col>
      <Grid
        ref={ref => this.gridRef = ref} {/* 添加ref */}
        width={width}
        height={height}
        rowHeight={rowHeight}
        cellRenderer={this.cellRenderer}
        rowCount={spotHistoryData.length}
        columnCount={7}
        columnWidth={this.getCellWidth}
        estimatedColumnSize={100}
        overscanRowCount={3}
        overscanColumnCount={3}
        onSectionRendered={this.whenSectionRendered}
        noContentRenderer={this.renderNoContent}
      />
    </Col>
  );
}

• 在loadHistory的setState回调中手动加载初始图片：

async loadHistory(spotId) {
  // 替换成你实际获取数据的逻辑
  const spotHistoryData = await yourApiCallToGetHistory(spotId);
  
  // 数据加载完成后，在setState回调中处理（确保Grid已渲染）
  this.setState({ spotHistoryData }, () => {
    if (this.gridRef && spotHistoryData.length > 0) {
      // 获取当前Grid可见的行范围
      const { startIndex, stopIndex } = this.gridRef.getVisibleRowIndices();
      // 加载可见行的图片
      this.loadNewImagesBetweenIndices(spotHistoryData, startIndex, stopIndex);
    }
  });
}

2. 确保状态更新的不可变性 #

虽然你用了map返回新数组，但直接修改数组内的对象引用可能导致PureComponent的浅比较失效（虽然这里应该不会，但保险起见）。修改loadHistImage，返回新的对象而非修改原引用：

async loadHistImage(imageId) {
  const data = await imageService.retrieveImage(imageId);
  const newHistData = this.state.spotHistoryData.map(x => {
    if (x.id_image_decision === imageId){
      // 返回新对象，保持不可变性
      return { ...x, image_decision: data };
    }
    return x;
  });
  this.updateSpotHistoryData(newHistData);
}

3. 避免首次渲染时清理图片 #

你的whenSectionRendered中首次渲染时previousIdxStart/Stop都是-1，调用clearImagesBetweenIndicesNotInView可能会误删刚加载的图片。添加判断跳过首次清理：

whenSectionRendered({rowOverscanStartIndex, rowOverscanStopIndex}) {
  const { previousIdxStart, previousIdxStop } = this.state;
  this.loadNewImagesBetweenIndices(
    this.state.spotHistoryData,
    rowOverscanStartIndex,
    rowOverscanStopIndex);
  
  // 首次渲染时不执行清理逻辑
  if (previousIdxStart !== -1 && previousIdxStop !== -1) {
    this.clearImagesBetweenIndicesNotInView(
      rowOverscanStartIndex,
      rowOverscanStopIndex,
      previousIdxStart,
      previousIdxStop);
  }
}

4. 检查rowRenderer的渲染逻辑 #

确保renderHistoryImageButton在image_decision有值时能正确渲染图片。比如：

renderHistoryImageButton(id, color, style, timestamp, imageData) {
  return (
    <button 
      key={id} 
      style={style} 
      onClick={() => {/* 显示图片逻辑 */}}
    >
      {imageData ? '查看图片' : '加载中...'}
      {/* 如果是直接显示图片： */}
      {imageData && <img src={`data:image/png;base64,${imageData}`} alt="Decision" />}
    </button>
  );
}

这些修改应该能解决你首次渲染图片不显示的问题：当数据加载完成后，手动触发初始行的图片加载，同时确保状态更新能触发Grid单元格的重渲染，无需等待滚动事件。

内容的提问来源于stack exchange，提问作者Matt McDermott