React无限滚动不会触发第一页的滚动

Question

很难在codesandbox b/c上复制一个示例，我从本地数据库中获取数据，但在我的应用程序中，我使用的是来自react-infinite-scroll-component库的无限滚动体。在我的应用程序的第一页上，我从api中加载组件，限制为10。这10项不进入页面底部，因为它们显示在网格中。正因为如此，滚动体不会触发到loadMore，而只是显示一个加载指示符。

const getDataLength = () => {
    return dataSource?.items?.length || 0;
  };
  return (
    <InfiniteScroll
      dataLength={getDataLength()}
      hasMore={!dataSource?.context?.lastPage && !loading}
      next={onLoadMore}
      loader={<Spin className={styles.spinner} key={0} />}
      style={{ overflow: 'hidden', padding: '0px 16px' }}
    >
      <List
        className={styles.list}
        grid={{
          gutter: 16,
          xs: 1,
          sm: 2,
          md: 3,
          lg: 4,
          xl: 5,
          xxl: 6,
        }}
        dataSource={dataSource?.items}
        renderItem={data => {
          return <List.Item>{renderItem(data)}</List.Item>;
        }} />
    </InfiniteScroll>

这也可能是因为项目与列表相比是一个项目网格，并且可能会扰乱dataLength支柱。如果有人知道如何在同样的情况下修复这个或一个例子，请告诉我。也许在第一次迭代时，我需要在列表中加载足够多的项，才能到达页面的底部？(列表组件来自antd)

Answer 1

我也遇到了同样的问题，最后在加载程序中提供了一个按钮，如果当前没有加载内容，就会显示该按钮。

loader={
  {loading ? (
    <Spinner />
  ) : (
    <button onClick={loadMore}>Load more</button>
  )}
}

不要真的认为这是最好的方法，但至少提供了一个快速的解决办法。