如何解决 react-virtualized (infinite loader) 中的 rowCount 问题答案

【问题标题】：How to fix the rowCount problem in react-virtualized (infinite loader)如何解决 react-virtualized (infinite loader) 中的 rowCount 问题
【发布时间】：2019-10-03 09:01:00
【问题描述】：

我正在我的项目中设置一个反应虚拟化的无限加载器，但我有一个小问题。所以我没有 remoteRowCount 所以我找到了一个解决方案，像这样：

public rowCount = this.props.hasNextPage ? this.props.list.length + 1 : this.props.list.length;

但这对我不起作用。我试图调试为什么不工作，但我什么也没找到。

public rowCount = this.props.hasNextPage ? this.props.list.length + 1 : this.props.list.length; 

<InfiniteLoader
        rowCount={this.rowCount}
        isRowLoaded={({ index }) => !!this.props.list[index]}
        loadMoreRows={this.props.loadMoreRows}
        minimumBatchSize={10}
        threshold={5}
      >
        {({ onRowsRendered, registerChild }) => (
          <WindowScroller>
            {({ height, isScrolling, onChildScroll, scrollTop }) => (
              <AutoSizer disableHeight>
                {({ width }) => (
                  <List
                    ref={list => {
                      this.listRef = list;
                      registerChild(list);
                    }}
                    onRowsRendered={onRowsRendered}
                    autoHeight
                    width={width}
                    height={height}
                    rowCount={this.props.list.length}
                    rowHeight={56}
                    rowRenderer={this.rowRenderer}
                    overscanRowCount={0}
                    isScrolling={isScrolling}
                    onScroll={onChildScroll}
                    scrollTop={scrollTop}
                  />
                )}
              </AutoSizer>
            )}
          </WindowScroller>
        )}
      </InfiniteLoader>

【问题讨论】：

能否请您在 codepen 中创建一个最小可重现的示例？

标签： javascript reactjs typescript react-virtualized rowcount

【解决方案1】：

我已解决，但我想为您提供帮助（如果您有类似的问题）

首先尝试理解为什么不能正常工作。对我来说，它可以使用任意大数字正确工作，但使用 rowCount 它不起作用。

在我的项目案例中：

首先我得到一个初始列表 (componentDidMount)。
其次，我发现当我向 rowCount 添加一个随机数时，它几乎是好的。
第三，我尝试调试 loadMoreRows，我从 indexRange 开始。 Tadaaa，这就是问题所在。对我来说 startIndex 和 stopIndex 是完全相同的值。所以我试图弄清楚为什么？而且我发现，因为rowCount计算器表达式得到的是以前的值，而不是现在的值。

对语言错误感到抱歉

【讨论】：