React中点击取消按钮时如何阻止API调用与递归函数执行？

要停止递归调用，核心是添加取消标记来中断递归链路，同时如果涉及异步请求，还要考虑取消正在进行的请求，避免无效资源占用。以下是具体实现方案：

1. 定义取消状态 #

在组件中用状态变量存储取消标记，以React为例：

const [isCancelled, setIsCancelled] = useState(false);

2. 实现取消按钮逻辑 #

点击取消按钮时，将标记设为true，同时可重置相关状态：

const cancelButton = () => {
    setIsCancelled(true);
    setStatusResult(false);
};

3. 修改递归函数，加入取消判断 #

在递归触发的关键节点检查取消标记，一旦标记为true就终止后续逻辑；如果涉及异步请求，还要用AbortController取消正在进行的请求：

// 用ref存储控制器，方便取消时访问
const abortControllerRef = useRef(null);

const submitButton = () => {
    // 已取消则直接返回，不执行后续逻辑
    if (isCancelled) return;

    // 创建AbortController用于取消异步请求
    abortControllerRef.current = new AbortController();
    const signal = abortControllerRef.current.signal;

    // 假设service支持传入signal参数（自定义service需改造支持）
    service(convertArray, (status, result) => {
        // 回调触发时先检查取消状态
        if (isCancelled) {
            setStatusResult(false);
            return;
        }

        if (result?.success && submitData) {
            setStatusResult(true);
            // 递归前检查取消标记，已取消则停止
            if (!isCancelled && j < fileData?.chunkResult.length) {
                method(j + 1, percent + percent1);
            }
        } else {
            setStatusResult(false);
        }
    }, { signal });
};

// 更新取消按钮逻辑，主动中止请求
const cancelButton = () => {
    setIsCancelled(true);
    setStatusResult(false);
    abortControllerRef.current?.abort();
};

4. 关键注意点 #

• 如果你的service是自定义封装的异步方法，需要改造它以支持AbortSignal参数，内部判断信号是否中止来终止请求。
• 递归开始前、回调逻辑里都要检查取消标记，避免遗漏任何触发递归的分支。
• 若需要重新发起递归，记得先把isCancelled重置为false。

内容的提问来源于stack exchange，提问作者zahra zamani