Javascript react虚拟化网格从服务中检索图像，但直到滚动操作后才呈现

我正在构建一个组件，用于显示从react虚拟化网格中的服务器检索到的数据。除了一个问题外，一切正常：当组件第一次渲染时，检索到的图像不会显示。但是，一旦发生滚动操作，它们将变为可用

我认为这与我的承诺的工作方式有关，但我似乎找不到解决办法

图像数据已成功检索，状态已成功更新，但仍不显示

我的理解是，当网格中的任何单元格使用“rowRenderer”回调进行渲染时，“whenSectionRendered”回调应触发，从而导致以下顺序：

调用“LoadNewImagesBetweenIndexes”

为所提供索引之间的每一行调用“loadHistImage”

“loadHistImage”从imageService.retrieveImage函数返回一个承诺，该函数接收base64映像，然后将映像数据作为“image_decision”放置在我的对象上，并使用新对象调用“updateSpotHistoryData”

“updateSpotHistoryData”更新状态，用新数据替换“spotHistoryData”状态并触发重新渲染

我希望在单击“HistoryImageButton”时，重新渲染可以使图像显示可用，但在发生滚动事件之前，图像不会显示。这是我的问题

我试过以下几件事：

在“componentDidMount”和/或“componentDidUpdate”中调用“LoadNewImagesBetweenIndexes”

直接在“rowRenderer”回调中调用“loadHistImage”

再次使用setState强制重新渲染对象

从“whenSectionRendered”函数中删除“ClearImagesBetween IndicatesNotInview”调用

class HistoryDisplay扩展了PureComponent{
建造师（道具）{
超级（道具）；
此.state={
宽度：1000，
以前的IDXStart:-1，
上一个IDXStop:-1，
spotHistoryData:“”
}
this.cellRenderer=this.cellRenderer.bind（this）；
this.whenSectionRendered=this.whenSectionRendered.bind（this）；
this.loadHistImage=this.loadHistImage.bind（this）；
this.loadHistory=this.loadHistory.bind（this）；
this.removeHistImages=this.removeHistImages.bind（this）；
}
componentDidMount（）{
此参数为.resetRowWidthIfRequired（）；
this.loadHistory（this.props.spotId）；
} 
componentDidUpdate（prevProps）{
此.resetPrevidXIFrequeired（prevProps）；
如果（prevProps.spotId！==this.props.spotId）{
this.loadHistory（this.props.spotId）；
}
}
...
异步loadHistImage（imageId）{
返回imageService.retrieveImage（imageId）
。然后（数据=>{
const newHistData=this.state.spotHistoryData.map（x=>{
if（x.id\u image\u decision===imageId）{
x、 图像_决策=数据；
}
返回x；
});
此.updatesPostistoryData（newHistData）；
});
}
更新历史数据（newHistoryData）{
这是我的国家({
spotHistoryData:newHistoryData
});
}
whenSectionRendered（{rowOverscanStartIndex，rowOverscanStopIndex}）{
const{previousIdxStart，previousIdxStop}=this.state；
此文件在索引之间加载新图像(
this.state.spotHistoryData，
rowOverscanStartIndex，
行扫描指数）；
此.ClearImages在指示器之间不可见(
rowOverscanStartIndex，
行数指数，
以前的idxstart，
以前的idxstop）；
}
在索引之间加载新图像（数组、startIdx、stopIdx）{
对于（让rowIndex=startIdx；rowIndex
class HistoryDisplay extends PureComponent{
  constructor(props) {
    super(props);

    this.state = {
      width: 1000,
      previousIdxStart: -1,
      previousIdxStop: -1,
      spotHistoryData: ''
    }

    this.cellRenderer = this.cellRenderer.bind(this);
    this.whenSectionRendered = this.whenSectionRendered.bind(this);
    this.loadHistImage = this.loadHistImage.bind(this);
    this.loadHistory = this.loadHistory.bind(this);
    this.removeHistImages = this.removeHistImages.bind(this);
  }

  componentDidMount() {
    this.resetRowWidthIfRequired();
    this.loadHistory(this.props.spotId);
  } 

  componentDidUpdate(prevProps) {
    this.resetPrevIdxIfRequired(prevProps);
    if(prevProps.spotId !== this.props.spotId){ 
      this.loadHistory(this.props.spotId);
    }
  }

  ...

  async loadHistImage(imageId) {
    return imageService.retrieveImage(imageId)
      .then(data => {
        const newHistData = this.state.spotHistoryData.map(x => {
          if (x.id_image_decision === imageId){
            x.image_decision = data;
          }
          return x;
        });
        this.updateSpotHistoryData(newHistData);
      });

  }

  updateSpotHistoryData(newHistoryData) {
    this.setState({
      spotHistoryData: newHistoryData
    });
  }

  whenSectionRendered({rowOverscanStartIndex, rowOverscanStopIndex}) {
    const { previousIdxStart, previousIdxStop } = this.state;
    this.loadNewImagesBetweenIndices(
      this.state.spotHistoryData, 
      rowOverscanStartIndex, 
      rowOverscanStopIndex);
    this.clearImagesBetweenIndicesNotInView(
      rowOverscanStartIndex,
      rowOverscanStopIndex,
      previousIdxStart, 
      previousIdxStop);
  }

  loadNewImagesBetweenIndices(array, startIdx, stopIdx) {
    for(let rowIndex=startIdx; rowIndex<stopIdx; rowIndex++) {
      this.loadHistImage(array[rowIndex].id_image_decision)
    }
    this.setState({
      previousIdxStart: startIdx,
      previousIdxStop: stopIdx
    });
  }

  cellRenderer({columnIndex, key, rowIndex, style}) {
    const { spotHistoryData } = this.state;
    return(
      <div key={key} >
        {this.createCell(spotHistoryData, columnIndex, rowIndex, style)}
      </div>
    );
  }


  createCell(items, columnIndex, rowIndex, style){
    const formattedTimestamp = (new Date(items[rowIndex].time_stamp_decision)).toLocaleString();
    const btnColor = 'white';
    switch(columnIndex){
      case 0:
        return this.renderHistoryImageButton(
                  this.createCellId(columnIndex, rowIndex), 
                  btnColor, 
                  style, 
                  formattedTimestamp, 
                  items[rowIndex].image_decision
                );
      case 1:
        return this.renderHistoryDataButton(
                  this.createCellId(columnIndex, rowIndex), 
                  btnColor, 
                  style, 
                  'Timestamp', 
                  formattedTimestamp
                );
      ...
    }
  }

  render() {
    const { height, rowHeight } = this.props;
    const { width, spotHistoryData } = this.state;

    return(
      <Col>
        <Grid 
          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>
    );
  }
}