React组件卸载时如何中止onClick触发的createAsyncThunk请求？

核心思路 #

要中止组件卸载时所有未完成的点击触发请求，需要跟踪所有待处理的请求Promise，并在组件卸载时统一调用它们的abort()方法。这里用useRef存储这些Promise，因为它能跨渲染周期保存值且不会触发组件重渲染。

具体实现步骤 #

1. 初始化Ref存储待处理请求
   用useRef创建数组，保存所有未完成的请求Promise：

   import { useRef, useEffect } from 'react';
   import { useDispatch } from 'react-redux';
   
   const YourComponent = () => {
     const dispatch = useDispatch();
     // 存储所有未完成的请求Promise
     const pendingRequestsRef = useRef([]);
   

2. 修改点击事件的请求处理逻辑
   触发请求时将返回的Promise存入Ref数组，并在请求完成（成功/失败/取消）后从数组移除，避免无效数据积累：

   const handleRequest = (id) => {
       const requestPromise = dispatch(requestBook(id));
       // 添加到待处理列表
       pendingRequestsRef.current.push(requestPromise);
       // 请求结束后从列表移除
       requestPromise.finally(() => {
         pendingRequestsRef.current = pendingRequestsRef.current.filter(p => p !== requestPromise);
       });
     };
   

3. 组件卸载时统一中止所有待处理请求
   利用useEffect的清理函数，遍历Ref数组中的Promise并调用abort()，同时清空数组：

   useEffect(() => {
       // （可选）将组件挂载时的初始请求也纳入统一管理
       const initialPromise = dispatch(getIssuedBooks());
       pendingRequestsRef.current.push(initialPromise);
       initialPromise.finally(() => {
         pendingRequestsRef.current = pendingRequestsRef.current.filter(p => p !== initialPromise);
       });
   
       // 组件卸载时清理所有未完成请求
       return () => {
         pendingRequestsRef.current.forEach(promise => {
           // 确保Promise有abort方法（适配createAsyncThunk生成的请求）
           if (typeof promise.abort === 'function') {
             promise.abort();
           }
         });
         pendingRequestsRef.current = [];
       };
     }, [dispatch]);
   

关键说明 #

• useRef的作用：它的current属性可变，不会因组件重渲染重置，适合存储跨周期跟踪的临时状态。
• finally移除Promise：无论请求结果如何，都会执行回调，确保待处理列表只保留未完成的请求。
• 检查abort方法：避免因意外情况（比如dispatch了非createAsyncThunk生成的action）导致调用不存在的方法报错。

内容的提问来源于stack exchange，提问作者Roshan Shetty