问题标签 [react-infinite-scroll]
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.
reactjs - 用钩子状态的数组反应无限滚动
react-infinite-scroller我在我的 React 组件中设置时遇到了麻烦。
我不想通过 API 直接在我的组件中获取数据，loadMore因为我已经从我的 IndexedDB 中获取了它。
所以我想使用我的数组dbScans（带对象的数组）并希望最大滚动。数组的 3 项。
我试图创建一个loadProducts函数来切片和连接我想要渲染的数组，但是当我尝试在 Infinite-Scroll 组件中调用它时出现过载错误。
javascript - Redux Saga - React Infinite Scroll - 加载时的两个 api 调用
我正在使用 redux saga 并反应无限滚动（https://www.npmjs.com/package/react-infinite-scroller）
我在一个 API 调用中有 10 条记录，但它在页面加载时显示 20 条记录。
它在加载时进行了两次 API 调用。不知道为什么。这是我的代码
fetchOrderRequest 调用有什么问题吗？我是从componentDidMount和loadmore调用的吗？这是因为这个创建问题吗？
但是，如果我从 componentDidMount 中删除 fetchOrderRequest 调用，则不会记录任何 API 调用。
javascript - 无限滚动列表不会加载更多数据
我有一个可无限滚动的组件，我希望它在用户滚动到页面底部时加载更多数据，但它只加载第一组数据然后停止。下面是我的代码：
该代码是从 ant design 复制的，但它使用的是我从后端检索到的我自己的数据。
提前致谢！
javascript - 如何在 Material-UI 对话框模式中使用 react-infinite-scroll-component？
我在项目中使用 react-infinite-scroll-component 并且它在对话框之外工作正常。当我滚动到页面底部时，会从服务器获取下一组数据，但我无法在 Material-UI 对话框中获得相同的操作。
这是对话框代码：
日志没有显示我到达第二页，它只是在我到达后端定义的前 30 个帖子后停止。
当我在对话框之外测试此代码时，没有问题。无限滚动在这个小文本上工作正常：
如何让无限滚动在对话框中工作？
reactjs - 我们可以使用反应虚拟化组件从服务器端动态加载网格数据吗？
我经历了许多反应虚拟化的例子，在我看到的所有这些例子中，它们最初都是在获取完整的数据。但是，我们需要使用 react-virtualized 组件加载网格（可能是数百万条记录），因为它具有其他几个功能。由于要渲染的数据很大，我们从服务器端逐部分获取它（可能一次 1000 个）。您能否让我知道并举例说明如何使用反应虚拟化来实现这一目标？
谢谢您的回答
reactjs - 使用 react-table + react-virtualized / react-window 无限加载
我对我的桌子有以下要求：
- 表应该有固定的标题
- 它需要自动调整大小：为了使无限滚动工作，第一次获取应该获得足够的数据量，以便滚动出现。
- 表体应该作为无限加载器工作：当滚动到列表的末尾时，表体应该显示加载指示器并加载更多行
我的假设如下：
- 由于用户将滚动浏览可能的大量数据集，我应该虚拟化列表（react-virtualized 似乎是我唯一的好选择）
- 因为我们目前有 react-table 我想保留它（它具有声明表行、列、访问数据和过滤 + 排序的强大机制）
- 当我们使用材料 ui 时，我需要使用材料 ui 反应组件
- 因为 react-virtualized 有自己的 Table 组件我可以使用它，但是 react-table 有不同的渲染行和列的方式，所以我必须使用 List 组件。（react-table 分隔行和列，而 react-virtualized 直接使用列作为 Table 组件的子级）
- 我看到 react-virtualized 与名为 InfiniteLoader 的 HOC 组件一起工作，所以我也应该使用它
- 最后，我需要我的列不要因为它有更多的文本（即具有动态高度）而被弄乱。因此，我尝试为此使用 CellMeasurer。
在这个沙箱中可以看到我能够实现的目标 https://codesandbox.io/s/react-table-infinite-mzkkp?file=/src/MuiTable.js （我不能在这里提供代码，因为它很大）
所以，一般来说，我可以让 React-virtualized 中的 Autosizer、CellMeasurer 和 List 组件正常工作。我被困在无限滚动部分。我在官方文档上看到了示例，但它似乎有点反模式（直接突变状态根本不是一件好事）
所以我试图达到类似的结果，但是如果你能看到，我的 loadMore 函数由于某种原因触发得太早了。它导致几乎每个滚动事件都发送请求。
任何帮助深表感谢。
我已经尝试过的：
- 使用 react-window 而不是 react-virtualized 它仅适用于简单的用例，并且由于单元格的动态大小而失败。
- 使用 react-inifnite-scrollcomponent（https://www.npmjs.com/package/react-infinite-scroll-component）它适用于整个页面（无法制作“粘性”标题，无法呈现加载指示器作为表体，它颂歌对长列表没有任何优化）
- 使用 react-virtualized 中的 Table 组件。我无法使其与 react-table 一起工作（因为 react-virtualized 中的 Table 组件似乎直接将 Cells 渲染为 Table 组件的子级。我知道它具有 renderRow 功能，但这意味着两个不同的地方，而 react-table 有
此外，尚不清楚如何以这种方式呈现自定义过滤器。
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