Skip to content

useInfiniteScroll在react 18版本的safari环境下,会有几率将同样的请求重复发出2次 #2367

Open
@icewind7030

Description

@icewind7030

具体复现demo见,codeSandbox,就是在文档中提供的codesandbox demo上修改的,需在safari上运行,而且不是很稳定,但是多次刷新有概率能出现。而在实际业务场景中,可能是由于列表UI比较复杂,导致复现概率很高。
image

看起来是当list的UI渲染开销比较大的时候,会很容易出现同一个request sevice被请求2次的情况,我查源码,大概率是这段请求完成的onSuccess处理逻辑造成的:github.dev
能看出来,这段代码是为了在请求完成后再校验一次滚动容器的高度和滚动位置,如果内容高度不足,那么马上再发起一次request,但是在有些时候,setTimeout执行的method中,获取的state finalData 依然是旧的。

下面是同样代码分别在mac chrome和iOS safari下的表现对比:
chrome
safari

猜测是在react 18中,应该是为了防止卡顿,react把渲染拆的很碎,而在safari中,有时候setTimeout 0阶段获取的state依然为前一次渲染所需的state,我在本地开发中修改node_module源码,也就是github.dev这里代码setTimeout改成10以后,基本就没有再出现这个问题了。

Metadata

Metadata

Assignees

No one assigned

    Labels

    help wantedExtra attention is needed

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions