Open
Description
具体复现demo见,codeSandbox,就是在文档中提供的codesandbox demo上修改的,需在safari上运行,而且不是很稳定,但是多次刷新有概率能出现。而在实际业务场景中,可能是由于列表UI比较复杂,导致复现概率很高。
看起来是当list的UI渲染开销比较大的时候,会很容易出现同一个request sevice被请求2次的情况,我查源码,大概率是这段请求完成的onSuccess处理逻辑造成的:github.dev
能看出来,这段代码是为了在请求完成后再校验一次滚动容器的高度和滚动位置,如果内容高度不足,那么马上再发起一次request,但是在有些时候,setTimeout执行的method中,获取的state finalData
依然是旧的。
下面是同样代码分别在mac chrome和iOS safari下的表现对比:
猜测是在react 18中,应该是为了防止卡顿,react把渲染拆的很碎,而在safari中,有时候setTimeout 0阶段获取的state依然为前一次渲染所需的state,我在本地开发中修改node_module源码,也就是github.dev这里代码setTimeout改成10以后,基本就没有再出现这个问题了。