infinite-scroll loadMore 重复加载

[ycshill]

Version of antd-mobile

5.37.1

Operating system and its version

Others

Browser and its version

chrome 127.0.6533.99

Sandbox to reproduce

https://codesandbox.io/p/sandbox/nervous-night-5t4mwg?resolutionHeight=700&resolutionWidth=375&workspaceId=b969faa1-bc1e-46a9-8cc9-d6ee1f3f5646&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clzjn8g6o00073b6mw4ncn36k%2522%252C%2522sizes%2522%253A%255B100%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clzjn8g6n00033b6mf0if3fno%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clzjn8g6n00043b6meba5wslo%2522%257D%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clzjn8g6n00063b6mxsqyanga%2522%257D%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clzjn8g6n00033b6mf0if3fno%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clzjn8g6n00023b6mkussj79k%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fapp.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clzjn8g6n00033b6mf0if3fno%2522%252C%2522activeTabId%2522%253A%2522clzjn8g6n00023b6mkussj79k%2522%257D%252C%2522clzjn8g6n00063b6mxsqyanga%2522%253A%257B%2522id%2522%253A%2522clzjn8g6n00063b6mxsqyanga%2522%252C%2522activeTabId%2522%253A%2522clzjn8j9600123b6msh46340n%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clzjn8g6n00053b6mnkisrx1y%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%257D%252C%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522id%2522%253A%2522clzjn8j9600123b6msh46340n%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%252C%2522clzjn8g6n00043b6meba5wslo%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clzjn8g6n00043b6meba5wslo%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

What happened?

当数据不多的时候，loadMore一直被触发，这是我不想要的，我希望只触发一次。
这种场景会导致业务代码加载好几页的数据，体验非常不好；

Relevant log output

No response

[ycshill]

期待回复

[Layouwen]

期待回复

如果还没有人处理, 周末我看看. 也欢迎尝试排查后, 提个 pr 修复~

[ycshill]

期待回复

如果还没有人处理, 周末我看看. 也欢迎尝试排查后, 提个 pr 修复~

你真好！ 这个组件我每次用都会遇见问题，解决个两天。我今天又发现一个点，问题中说tab 加了 forceRender 可以让loadMore不执行，但是我们使用的时候不可能每个tab都写一个 InfiniteScroll ，一般是写一个，切换tab的时候如果组件中 useEffect 请求数据，切换tab还是会触发loadmore 再请求数据，又重复了。

[ycshill]

期待回复

如果还没有人处理, 周末我看看. 也欢迎尝试排查后, 提个 pr 修复~

大神看了吗

[Layouwen]

Version of antd-mobile

5.37.1

Operating system and its version

Others

Browser and its version

chrome 127.0.6533.99

Sandbox to reproduce

https://codesandbox.io/p/sandbox/nervous-night-5t4mwg?resolutionHeight=700&resolutionWidth=375&workspaceId=b969faa1-bc1e-46a9-8cc9-d6ee1f3f5646&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clzjn8g6o00073b6mw4ncn36k%2522%252C%2522sizes%2522%253A%255B100%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clzjn8g6n00033b6mf0if3fno%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clzjn8g6n00043b6meba5wslo%2522%257D%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clzjn8g6n00063b6mxsqyanga%2522%257D%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clzjn8g6n00033b6mf0if3fno%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clzjn8g6n00023b6mkussj79k%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fapp.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clzjn8g6n00033b6mf0if3fno%2522%252C%2522activeTabId%2522%253A%2522clzjn8g6n00023b6mkussj79k%2522%257D%252C%2522clzjn8g6n00063b6mxsqyanga%2522%253A%257B%2522id%2522%253A%2522clzjn8g6n00063b6mxsqyanga%2522%252C%2522activeTabId%2522%253A%2522clzjn8j9600123b6msh46340n%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clzjn8g6n00053b6mnkisrx1y%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%257D%252C%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522id%2522%253A%2522clzjn8j9600123b6msh46340n%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%252C%2522clzjn8g6n00043b6meba5wslo%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clzjn8g6n00043b6meba5wslo%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

What happened?

当数据不多的时候，loadMore一直被触发，这是我不想要的，我希望只触发一次。 这种场景会导致业务代码加载好几页的数据，体验非常不好；

Relevant log output

No response

看了一下这个组件的代码实现. 该组件设计就是通过触发 loadMore 直到占满页面来实现无线滚动.
你上面的 demo 是因为你手动写死了 data 为 [1] 但是下一行的 setHasMore 却没有根据你 data 中的值取进行判断赋值.
导致你说的重复 loadMore.
其实你想数据少的时候只加载一次, 你只需要在 loadMore 里面判断总数不够/已经没有更多数据可以获取了, 就直接 setHasMore(false) 即可
也可以尝试加一下 antd 的钉钉社区群讨论一下

[ycshill]

据少的时候只加载一次, 你只需要在 loadMore 里面判断总数不够/已经没有更多数据可以获取了, 就直接 setHasMore(false)
我是想用它实现上滑加载更多，一进页面的时候就加载一次数据，就一直触发loadMore，我只想在滑动的时候触发。能提供个这种例子吗

[ycshill]

Version of antd-mobile

5.37.1

Operating system and its version

Others

Browser and its version

chrome 127.0.6533.99

Sandbox to reproduce

https://codesandbox.io/p/sandbox/nervous-night-5t4mwg?resolutionHeight=700&resolutionWidth=375&workspaceId=b969faa1-bc1e-46a9-8cc9-d6ee1f3f5646&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clzjn8g6o00073b6mw4ncn36k%2522%252C%2522sizes%2522%253A%255B100%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clzjn8g6n00033b6mf0if3fno%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clzjn8g6n00043b6meba5wslo%2522%257D%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clzjn8g6n00063b6mxsqyanga%2522%257D%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clzjn8g6n00033b6mf0if3fno%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clzjn8g6n00023b6mkussj79k%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fapp.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clzjn8g6n00033b6mf0if3fno%2522%252C%2522activeTabId%2522%253A%2522clzjn8g6n00023b6mkussj79k%2522%257D%252C%2522clzjn8g6n00063b6mxsqyanga%2522%253A%257B%2522id%2522%253A%2522clzjn8g6n00063b6mxsqyanga%2522%252C%2522activeTabId%2522%253A%2522clzjn8j9600123b6msh46340n%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clzjn8g6n00053b6mnkisrx1y%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%257D%252C%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522id%2522%253A%2522clzjn8j9600123b6msh46340n%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%252C%2522clzjn8g6n00043b6meba5wslo%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clzjn8g6n00043b6meba5wslo%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

What happened?

当数据不多的时候，loadMore一直被触发，这是我不想要的，我希望只触发一次。 这种场景会导致业务代码加载好几页的数据，体验非常不好；

Relevant log output

No response

看了一下这个组件的代码实现. 该组件设计就是通过触发 loadMore 直到占满页面来实现无线滚动. 你上面的 demo 是因为你手动写死了 data 为 [1] 但是下一行的 setHasMore 却没有根据你 data 中的值取进行判断赋值. 导致你说的重复 loadMore. 其实你想数据少的时候只加载一次, 你只需要在 loadMore 里面判断总数不够/已经没有更多数据可以获取了, 就直接 setHasMore(false) 即可 也可以尝试加一下 antd 的钉钉社区群讨论一下
我把demo，改了下，也是一直触发loadMore

[xiaoliu1990]

配合接口用的时候，接口难道不会返回一个页码么，当前页码和最大页码相等的时候，loadMore改成false就好了。以你这个案例为例就相当于
let count = 0;
export async function mockRequest() {
if (count === 1) {
return [];
}
await sleep(2000);
count++;
return ["A"];
}
这样就请求一次了。