问题标签 [react-infinite-scroll-component]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
graphql - 在基于游标的分页 GraphQL API 中跳过页面
我们有一个 GraphQL API，我们在其中使用 Relay 规范的基于光标的分页。在使用react-window-infinite-loader在无限滚动组件上做一些 UI 工作时，我们的开发人员注意到了一些情况，如果用户滚动得非常快，他们会很快从第 1 页转到第 20 页，而无需加载所有之间的页面。该loadMoreItems库中的函数具有以下签名：
他们首先使用 GraphQL Connection 类型中的 totalCount 的值填充 itemCount。
然后loadNextPage，他们不只是使用下面示例中的内容，而是考虑使用跳转到特定限制/偏移量的能力（如loadMoreItems上面的签名）而不是使用光标。
我很好奇人们通常如何处理这样的情况。使用基于游标的分页的原因适用于我们的数据，因为它是动态的，并且可以在整个列表中删除或添加元素，因此肯定有机会仅使用限制/偏移来重复或跳过行。我们可以运行查询并仅返回带有 PageInfo 的连接，以获取所需偏移量的游标，而无需所有边，尽管这是一个额外的 http 请求。向 API 添加查询以获取给定索引的当前光标也可能是一种解决方案。尽管这两种解决方案似乎都不是很好。从基于光标的分页切换到限制/偏移听起来也不理想。我想知道在这种情况下常用的其他一些解决方案。
reactjs - 您可以使用 react-infinite-scroll-component 捕捉到特定目标吗？
可以说我正在使用 react-infinite-scroll-component 并且我想将它与某种分页结合起来。假设我渲染了 100 个项目的列表，但一次只显示 10 个。我希望用户能够按下“第 3 页按钮”，然后无需滚动即可呈现项目 21-30。那可能吗？
reactjs - 如何正确使用 react-infinite-scroll-component 库中的 refreshFunction 函数？
我想通过下拉更新列表，但我不太明白这种方法是如何工作的。
我该如何实施？
javascript - 当我滚动到屏幕的一半时，我希望我的反应组件加载更多数据
我正在创建一个 React 项目，我通过调用 api 来渲染数据，并且每次 api 都会给我长度为 10 的数据数组。我正在使用react-infinite-scroll-component来使用无限滚动功能。每当我在屏幕的一半滚动时，我都想加载数据，我不想在屏幕上显示加载器。任何人都可以帮助我。
这是我的无限滚动代码，我尝试更改 dataLength 道具，但没有奏效。
javascript - 下一个函数不会被调用以响应无限滚动
我正在尝试使用反应无限滚动来调用滚动上的更多数据但无法正确集成此库如果我滚动到整个页面时不会触发下一个事件
reactjs - 下一个道具在 react-infinite-scroll-component 中不起作用
无限滚动组件位于表格中，并且位于可滚动页面中。我尝试给
id="scrollableDiv"页面中的每个 div 以及<html>index.html 中的每个 div 仍然没有用。当我删除 scrollableTarget="scrollableDiv" fetchdata 直到底部的父滚动条。之后 fetchData 功能不起作用。当我强制滚动父滚动 fetchdata 工作。
但我希望它能够滚动表格。不是在滚动父级时（我的意思是整个页面），有人告诉我应该在哪里 assingn id="scrollableDiv"。没有指定高度的 div
这是代码，
reactjs - 使用 React Hooks 时无限滚动组件未显示获取项目
我正在为食物食谱做即时搜索功能，并希望实现无限滚动组件。我想要的是在开始时显示一个搜索栏，根本没有显示食谱，然后当用户开始输入字母时，它将从 API 获取的数据中获取并显示 8 个项目，当在底部页面向下滚动时它将继续获取并显示接下来的 8 个项目。
我正在按照此链接的说明进行操作，但遇到两个问题：
useState如果我按照说明设置初始值，它会显示 8 个空占位符（无数据）如果我向下滚动，它将获取并显示下一个没有数据的 8 个空占位符
如果我将初始设置useState为空数组[]，则可以很好地获取并显示每个占位符以及每个占位符中的数据，所以我对此的理解可能是Array.from(Array(8).keys(), n => n + 1)inuseState和Array.from(Array(8).keys(), n => n + prevState.length + 1)in的代码与function fetchMoreListItems()我的情况无关。
我的问题是如何实现正确的代码，以便它可以获取我想要的对象数量的正确数据，所以当我向下滚动时它也可以使用滚动条。谢谢大家！
这是我的演示：gif
这是我的代码：
// 食谱.js