useRequest 在 React 18 部分场景下不兼容, 存在严重问题

[PalePlain]

useRequest:

Fetch.ts 文件:

useRequestImplement.ts 文件:

当触发用户交互行为, 如拖拽行为时:

React 17 会按照下列顺序执行:

1. 依照 Effect 链条顺序优先执行 drag文件 Effect Cleanup
2. 接着执行 useRequest Hook Effect Cleanup, 此时会触发 useRequestImplement.ts useUnmount 回调函数, 即 fetchInstance.cancel(), 而执行 fetchInstance.cancel() 后会使得 this.count + 1, 此时 this.count 值为 1
3. 接着触发 drag文件 useRequest 返回的 run 函数, 此时 this.count 再次 + 1, 值为 2, 因此 currentCount 的值也为 2, 因此会按照预期执行 onSuccess 回调函数

符合预期

React 18 执行顺序 :

1. 优先触发拖拽行为, 即 drag文件 useRequest 返回的 run 函数, 此时 this.count + 1, 值为 1, 因此 currentCount 的值为 1
2. 执行异步逻辑 const res = await servicePromise; 触发 异步可中断更新
   3.. 时间切片 调度其他优先级任务, 执行 Effect 链条 Cleanup: useDragPreCheck Hook Effect Cleanup -> useRequest Hook Effect Cleanup, 此时执行 fetchInstance.cancel(), this.count + 1, 此时 this.count 值为 2
3. 当 异步 行为完成后, 回到上下文继续执行逻辑, 此时判断 currentCount !== this.count 成立, currentCount 由于闭包存在, 值为1, 而 this.count 值为 2, 因此返回了 new Promise(() => {}); 导致 onSuccess 未被执行

在页面中的表现则为 onSuccess 未触发, loading 不消失, 数据未处理

相关 demo (React 18.2.0 + ahooks 3.7.10) : https://is.gd/lZJgyH

将一个节点拖拽到另一个容器中, 表现为 loading 不消失; 而将 react 版本更换为 react 17 后则表现正常;

[nianyi778]

我也遇到了，这种情况。

[nianyi778]

希望早点修复

[nianyi778]

我现在临时解决办法，就是换了react-query ，一切都正常了，符合预期

[crazylxr]

@PalePlain @lidakai 来，帮忙整个 demo，我来看一下

[github-actions]

Hello @PalePlain. Please provide a online reproduction by forking this link https://codesandbox.io/s/ok2fe or a minimal GitHub repository. Issues labeled by Need Reproduce will be closed if no activities in 3 days.

你好 @PalePlain, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击 此处 创建一个 codesandbox 或者提供一个最小化的 GitHub 仓库。3 天内未跟进此 issue 将会被自动关闭。

[PalePlain]

Hello @PalePlain. Please provide a online reproduction by forking this link https://codesandbox.io/s/ok2fe or a minimal GitHub repository. Issues labeled by Need Reproduce will be closed if no activities in 3 days.

你好 @PalePlain, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击 此处 创建一个 codesandbox 或者提供一个最小化的 GitHub 仓库。3 天内未跟进此 issue 将会被自动关闭。

稍等, 我写个 demo

[PalePlain]

Hello @PalePlain. Please provide a online reproduction by forking this link https://codesandbox.io/s/ok2fe or a minimal GitHub repository. Issues labeled by Need Reproduce will be closed if no activities in 3 days.
你好 @PalePlain, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击 此处 创建一个 codesandbox 或者提供一个最小化的 GitHub 仓库。3 天内未跟进此 issue 将会被自动关闭。

稍等, 我写个 demo

react 18 demo: https://is.gd/lZJgyH

将一个节点拖拽到另一个容器中, 表现为 loading 不消失; 而将 react 版本更换为 react 17 后则表现正常;

[PalePlain]

继续跟进 ISSUE: #2514