如何根据其他请求处理请求或离开页面？答案

【问题标题】：how to handle the request depending on other request or leave the page?如何根据其他请求处理请求或离开页面？
【发布时间】：2021-09-12 09:33:52
【问题描述】：

我有一页请求“任务”，如果用户不提交任务或离开页面，我想处理一个请求，

这些情况，

如果用户提交表单，我会将他重定向到其他页面。

2.如果用户想离开表单请求的页面，我想发出一个名为“DELETE”的请求。

3.如果用户通过点击其他公共路线导航到页面之外，那么我也想发出一个名为“DELETE”的请求。

这是我提交表单时的代码：

// here if the user submit the form 
  useEffect(() => {
    if (submitForm.status === RequestStatus.resolved) {
      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]);

这是删除请求

 const deleteProcessInstance = useCallback(async () => {
    
      try {

     // Delete request here 

  
      } catch {
        notification.error({
          message: t('messages.error.wentWrong'),
          description: t('messages.error.tryAgainLater'),
        });
      }
    
  }, [ dispatch, t]);

如果使用案例 2 和 3，我如何处理删除请求，但是我现在在提交表单时遇到错误，然后删除请求命中，

我不希望这样，如果用户不提交表单并导航出提交表单页面，我只想点击删除请求

这是我的代码

  useEffect(
    () => () => {
      deleteProcessInstance();
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    []
  );

【问题讨论】：

标签： javascript reactjs typescript redux

【解决方案1】：

没有可靠的方法可以做到这一点，您可以使用unload 事件但它不可靠。 Unoad event.

在提交表单之前最好不要在数据库中保存任何内容，或者提出一些不同的解决方案

【讨论】：