如何防止api调用时，取消按钮点击在react js?

Question

我有一个递归函数，我想在单击取消按钮时停止调用该函数。这是提交方法:

const submitButton = () => {
service(convertArray, (status, result) => {
if (result?.success && submitData) {
setStatusResult(true);
if (j < fileData?.chunkResult.length) {
method(j + 1, percent + percent1);
}
} else {
setStatusResult(false);
}
});
};

取消按钮该怎么做?

Answer 1

递归函数有一个基本情况，用户可以创建一个基本情况，并在基本情况不满足时运行函数，如下所示:

const [isCancelled, setIsCanceled] = useState(false);
const onCancelButtonClick = () => setIsCanceled(true);
const submitButton = () => {
if (isCancelled) return;
service(convertArray, (status, result) => {
if (result?.success && submitData) {
setStatusResult(true);
if (j < fileData?.chunkResult.length) {
method(j + 1, percent + percent1);
}
} else {
setStatusResult(false);
}
});
};