Question

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

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

但这对我不起作用。我试图调试为什么不起作用，但是我什么也没发现。

p

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>

Answer 1

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

首先，请尝试理解为什么无法正常工作。对我来说，使用任意大数字都可以正常工作，但是使用rowCount却无法正常工作。

在我的项目案例中：

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

很抱歉出现语言错误

如何解决React虚拟化（无限加载程序）中的rowCount问题

1 个答案: