滚动条消失/重新出现的反应虚拟化无限循环答案

【问题标题】：react-virtualized infinite loop of scrollbar disappearing/reappearing滚动条消失/重新出现的反应虚拟化无限循环
【发布时间】：2020-11-14 21:50:15
【问题描述】：

我目前正在使用 react-virtualized 来呈现巨大的列表。当我调整大小并达到某个宽度时，即使计算的宽度保持不变，滚动条也会无限消失并重新出现。这可能是 react-virtualized 库中的一个错误，但我正在尝试寻找解决方法。这是我现在在我的渲染方法中拥有的内容：

// The onResize is what I am currently focusing on
<AutoSizer disableHeight onResize={this.setDimensions}>
        {({ width }) => {
          return (
            <div id={id} style={{ width: this.state.containerWidth }}>
              <InfiniteLoader
                isRowLoaded={this.isRowLoaded}
                loadMoreRows={handleInfiniteLoad}
                rowCount={sheetsTotalCount} // all elements, not only the loaded
                threshold={3} // starts loading the new data within 3 rows from the bottom
                minimumBatchSize={3}
              >
                {({ onRowsRendered, registerChild }) => (
                  <WindowScroller scrollElement={scrollElement}>
                    {({ height, scrollTop }) => (
                      <List
                        autoHeight
                        height={height || defaultHeight}
                        ref={registerChild}
                        rowCount={this.state.numRows}
                        rowHeight={this.state.cardHeight + 2 * marginBetweenCards}
                        rowRenderer={this.rowRenderer} // renders the rows
                        scrollTop={scrollTop}
                        width={this.state.containerWidth}
                        onRowsRendered={onRowsRendered}
                        className="oh outline-none"
                      />
                    )}
                  </WindowScroller>
                )}
              </InfiniteLoader>
              {sheetsTotalCount > 0 &&
                sheetsAreLoading &&
                renderLoadingIndicator()}
            </div>
          );
        }}
      </AutoSizer>

使用 onResize 道具时，由于代码尝试进行一系列计算，我最终得到了无限消失/重新出现错误。

setDimensions = ({ width }) => {
    const { sheetList } = this.props;
    this.setState({
      containerWidth: width > 0 ? width : defaultWidth
    },() => { 
      this.setState({numCols: Math.max(Math.floor(this.state.containerWidth / baseThumbnailWidth), 1) }, () => {
        this.setState({numRows: Math.ceil(sheetList.size / this.state.numCols)}, () => {
          this.setState({cardWidth: Math.floor(this.state.containerWidth / this.state.numCols - 2 * marginBetweenCards)}, () => {
            this.setState({cardHeight: Math.round(this.state.cardWidth * thumbnailProportion)});
          });
        });
      });
    });
  }

编辑：我能够解决减小某些窗口尺寸宽度的问题。我认为这可能是 react-virtualized 的问题，最类似于我正在处理的问题来自 Wessel 显示的问题

【问题讨论】：

你没有说你是如何实现rowRenderer的，所以我不确定这是不是答案，但你是否验证过你将rowRenderer的函数参数中的样式应用于返回的元素，如每github.com/bvaughn/react-virtualized/issues/… ?

标签： reactjs resize react-virtualized

【解决方案1】：

我认为问题在于您嵌套了这么多setStates。每次你的一个状态更新时，它都会再次呈现你的列表，而你将它嵌套 5 次这一事实似乎很危险。

有没有办法预先计算所有内容，然后调用setState 并立即更新所有属性？我会试试看。

【讨论】：