问题标签 [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.

0 投票
1 回答
2025 浏览

reactjs - 用钩子状态的数组反应无限滚动

react-infinite-scroller我在我的 React 组件中设置时遇到了麻烦。

我不想通过 API 直接在我的组件中获取数据,loadMore因为我已经从我的 IndexedDB 中获取了它。

所以我想使用我的数组dbScans(带对象的数组)并希望最大滚动。数组的 3 项。

我试图创建一个loadProducts函数来切片和连接我想要渲染的数组,但是当我尝试在 Infinite-Scroll 组件中调用它时出现过载错误。

0 投票
1 回答
2414 浏览

javascript - 如何使用带有钩子的 React Infinite Scroll

第一次使用react-infinite-scroll-component并且正在努力让它按预期工作。目前,它在获取前 2 个项目(这是我想要的)之后调用 loadMore 方法,但随后它会加载接下来的 3 个项目(它应该只加载 2 个)并且不会再次调用 loadMore 方法。谁能看到我哪里出错了?

我将 itemsPerPage 作为道具传递,例如 10,因此我可以将 numberOfItemsToDisplay 设置为 10,然后当调用 loadMore 时,我可以使用 itemsPerPage 值增加 numberOfItemsToDisplay。

任何帮助将非常感激!谢谢

0 投票
1 回答
712 浏览

javascript - 使用 react-infinite-scroll 和 react 钩子时如何删除可重复的 API 结果

我正在使用react-infinite-scroll-component库和randomuser.me api。我可以获取数据并且无限滚动工作得很好,但我遇到的问题是,由于组件在每次滚动时都会发出请求,所以我得到了可重复的结果。

我找到了一种解决方法,可以删除相同的数组,但它不能与无限滚动包一起正常工作。

这是我的代码:

评论的是我发现删除具有相同图像链接的数组的解决方法。Codesandbox:https ://codesandbox.io/s/gracious-wildflower-opjx5?file=/src/App.js

0 投票
0 回答
532 浏览

reactjs - Firestore 在 react-infinite-scroll-component 中复制数据

我在 Firestore 中遇到数据重复问题。我正在使用 react-infinite-scroll-component webpack 创建一个无限滚动。我在使用来自 firestore 的调用时遇到问题,我可以按照文档返回所有带有分页的项目,但是只要我点击我的喜欢功能发布一个新帖子就会添加到我的帖子提要中,这可以在我的提要中的任何位置. 我怎么解决这个问题?

我的滚动正在工作,只要我向下滚动以将其他帖子调用到我的提要中,它们就会按原样返回,但是一旦我单击喜欢或不喜欢帖子,就会将新帖子添加到我的提要中。欢迎大家帮忙,谢谢大家。

我在社区中查看了here,但没有找到任何可以澄清我的问题的东西

无限滚动功能(获取更多帖子)。

来自firestore的getDocs func分页

组件DidMount

类组件中的 JSX 映射

0 投票
1 回答
5052 浏览

reactjs - React Scroll - 在 NavBar 中使用 React Scroll to 滚动到特定组件

我正在尝试在导航栏中使用反应滚动,以便在单击任何导航元素时能够滚动到特定组件。

我一直在尝试遵循代码,但我似乎无法完全理解它。我在这里找到了一个很好的答案单击导航栏链接时如何滚动到特定的目标组件

但我对此有点困惑。下面是我自己的代码,我希望将其保留为函数,而不是将其更改为类:

一旦我转到 MainWebsite 组件,其中 NavBar 与其他组件坐在一起。转到 About Me 组件并将其包装在 Element 标记中,正如我复制的答案所暗示的那样。它不起作用。

我只是收到一个警告错误说

这是我的关于我

那么,我只是没有在 NavBar 组件中正确编写某些内容,以便能够在单击后滚动到其他组件吗?

第二次使用这个论坛,所以任何关于减少/创建更好问题的建议也很感激!我花了很长时间试图自己寻找答案等,但我迷路了。

0 投票
1 回答
3122 浏览

reactjs - 反应无限滚动组件表体

有没有办法在“表格”中使用反应无限滚动组件包? https://www.npmjs.com/package/react-infinite-scroll-component 这是我的代码。

在此处输入图像描述

0 投票
0 回答
88 浏览

javascript - 使用无限滚动进行渲染和使用反应获取更多数据

我想在我的一个反应组件中添加一个无限滚动组件。我正在使用react-infinite-scroll-component并想在一定长度后添加更多获取。

这是组件,我想在新项目上进行无限滚动

我想用 newItems 列表中的 5 个元素实现类似的react-infinite-scroll-component 示例中提供的代码片段。

0 投票
1 回答
2161 浏览

javascript - 如何在 Material-UI 对话框模式中使用 react-infinite-scroll-component?

我在项目中使用 react-infinite-scroll-component 并且它在对话框之外工作正常。当我滚动到页面底部时,会从服务器获取下一组数据,但我无法在 Material-UI 对话框中获得相同的操作。

这是对话框代码:

日志没有显示我到达第二页,它只是在我到达后端定义的前 30 个帖子后停止。

当我在对话框之外测试此代码时,没有问题。无限滚动在这个小文本上工作正常:

如何让无限滚动在对话框中工作?

0 投票
0 回答
172 浏览

reactjs - 反应无限滚动

我正在尝试使用 react 组件进行无限滚动,我尝试使用 react-infinite-scroll-component npm 包,但它似乎不适合我的项目。

我需要有 2 个地图功能来显示无限滚动的内容,以便看起来像这样:https ://i.imgur.com/qtNM3qd.png

左侧内容为 1 个地图,右侧内容为 1 个地图。

当我尝试将 npm 包与两个地图一起使用时,cols 就会停止工作,第二个地图会低于另一个地图。

这是代码。我想知道 npm 包是否有解决方案,如果没有,是否可以从头开始,或者我的 2 map 设置会阻止我?

多谢你们。

0 投票
1 回答
121 浏览

reactjs - 如何在使用 React Infinite Scroll Component 时永久显示 Y 滚动条?

我之前尝试overflow-y: scroll;在父 div 中使用,它确实永久显示了 y 滚动条,但它阻止了 React Infinite Scroll 组件触发“下一个”功能。

我想这样做的原因是,没有它,屏幕在浏览网站时会闪烁。这是由于滚动条在没有结果时隐藏(在加载过程中,某些页面没有很多结果),而在有很多结果时显示。