React项目中如何按用户操作场景处理请求，避免表单提交后误触发DELETE请求

云上老周

2026-10-4

解决方案

问题根因

你当前使用的useEffect清理函数会在组件卸载时无差别执行，表单提交成功后页面跳转触发组件卸载，自然也会触发DELETE请求。我们只需要新增提交成功的标记位，判断仅在未提交成功的场景下执行删除即可。

实现步骤

1. 新增提交状态标记

使用useRef存储提交状态，不需要触发组件重渲染，且可以在清理函数中拿到最新值（不要用useState存储该标记，清理函数是组件初始化生成的闭包，无法拿到后续更新的state值）：

import { useRef } from 'react';

// 表单组件内部新增
const isFormSubmitted = useRef(false);

2. 提交成功时更新标记位

在表单提交成功的逻辑分支，把标记位设为true：

useEffect(() => {
  if (submitForm.status === RequestStatus.resolved) {
    isFormSubmitted.current = true; // 新增这行标记表单已提交成功
    setFormLoading(false);
    notification.success({
      message: t('messages.success'),
      description: t('messages.success.requestCreated'),
    });
    history.goBack();
  } else if (submitForm.status === RequestStatus.rejected) {
    setFormLoading(false);
    notification.error({
      message: t('leaves.newRequest.message.leaveRequestError'),
      description: submitForm.error?.message?.includes('Leave request already exists')
        ? t('leaves.newRequest.error.alreadyExists')
        : submitForm.error?.message,
    });
  }
}, [submitForm.status, t, submitForm.error?.message, history]);

3. 修改清理函数逻辑，加判断条件

只有标记位为false时，才执行删除请求，同时补全useEffect依赖，不需要再忽略eslint检查：

useEffect(
  () => () => {
    // 仅未提交成功的场景下离开页面才触发删除
    if (!isFormSubmitted.current) {
      deleteProcessInstance();
    }
  },
  [deleteProcessInstance]
);