React-Table plus InfiniteScroll 实现不更新

Question

我正在尝试使用 React-Table 实现 InfiniteScroll，我已经拥有所有状态的数据，所以我要实现 InfiniteScroll 一次显示一点数据，因为我们没有'想使用分页，这是我目前所拥有的

<div
  id="scrollableDiv"
  style={{
    height: 320,
    overflow: 'auto',
    display: 'flex',
  }}
>
  <InfiniteScroll
    dataLength={rows.length}
    next={fetchMoreData}
    hasMore={true}
    style={{ display: 'flex', flexDirection: 'column' }}
    loader={<h4>Loading more items...</h4>}
    scrollableTarget="scrollableDiv"
  >
...
    <tbody {...getTableBodyProps()} className="table-body">
      {rows.slice(0, offset).map((row) => {
        prepareRow(row);
...

我的 fetchMoreData 和偏移状态是：

const [offset, setOffset] = useState(5);

...

const fetchMoreData = () => {
  setTimeout(() => {
    setOffset(offset + 5);
  }, 100);
};

这是第一次有效，table 多了 5 行，但是当您再次到达末尾时没有任何反应，Loading more items 消息保留并且 fetchMoreData 函数不执行任何操作, 是什么原因导致它第一次起作用但之后不起作用？

这是一个 codesandbox 具有相似代码、相同概念和问题的代码

Answer 1

根据documentation 对于 next 函数

a function which must be called after reaching the bottom. It must trigger some sort of action which fetches the next data. The data is passed as children to the InfiniteScroll component and the data should contain previous items too. e.g. Initial data = [1, 2, 3] and then next load of data should be [1, 2, 3, 4, 5, 6].

所以你的fetchMoreData函数

  fetchMoreData = () => {
    if (this.state.items.length >= 500) {
      this.setState({ hasMore: false });
      return;
    }
    // a fake async api call like which sends
    // 20 more records in .5 secs
    setTimeout(() => {
      this.setState({
        offset: this.state.offset + 5
      });
    }, 500);
  };

不会以某种方式增加原始项目数组，而是设置偏移量，这就是它一直说“正在加载”的原因。如果您将一些新项目放入 this.state.items 数组，它将起作用。

React-Table plus InfiniteScroll 实现不更新

React-Table plus InfiniteScroll implementation not updating

javascript

reactjs

infinite-scroll

react-table