Question

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

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 属性。如果有人知道如何解决此问题或在相同情况下的示例，请告诉我。也许在第一次迭代时，我需要在列表中加载足够的项目才能到达页面底部？（List组件来自antd）

反应无限滚动不会在第一页触发滚动

0 个答案: