当我滚动到屏幕的一半时，我希望我的反应组件加载更多数据答案

【问题标题】：i want my react component to load more data when i scroll to half of my screen当我滚动到屏幕的一半时，我希望我的反应组件加载更多数据
【发布时间】：2022-01-04 11:22:29
【问题描述】：

我正在创建一个 React 项目，在其中我通过调用 api 来呈现数据，并且每次 api 都会给我长度为 10 的数据数组。我正在使用 react-infinite-scroll-component 用于使用无限滚动功能。每当我在屏幕的一半滚动时，我都想加载数据，我不想在屏幕上显示加载器。谁能帮帮我。



 <InfiniteScroll
            dataLength={data.length}
            next={fetchMoreData}
            hasMore={true}
            loader={
              <CircularProgress/>
            }
          >
            {data.map((item, index) => {
              return <Card data={item} key={index} />;
            })}
          </InfiniteScroll>

这是我的无限滚动代码，我尝试更改 dataLength props，但没有成功。

【问题讨论】：

标签： javascript reactjs react-infinite-scroll-component

【解决方案1】：

我认为您可能希望使用 scrollThreshold 属性来定义何时调用 next。

您可以传递浮点数（例如 0.5）或字符串（例如“200px”）来定义它。

如果您要删除加载器，请忽略该道具。

来自这里的道具列表：https://www.npmjs.com/package/react-infinite-scroll-component

【讨论】：

感谢您的回答