提交面板遇服务器错误时显示ErrorModal的实现问题

核心问题分析 #

你的思路是对的——确实应该通过catch语句捕获请求错误并触发ErrorModal，但当前代码未生效，大概率是以下两个原因：

1. 请求工具（如Axios）的错误结构不符 #

如果Trading是基于Axios封装的接口请求，服务器返回的500错误不会直接挂载error.status，而是在error.response.status中。直接判断error.status会导致条件不成立。

2. Trading函数未正确抛出错误 #

如果是自定义封装的请求函数，可能没有在服务器返回错误状态码时主动reject错误，导致catch分支根本不会执行。

正确实现代码 #

第一步：修正submitPanel的错误捕获逻辑 #

修改catch分支，兼容Axios错误结构，并处理网络错误等边缘情况：

const submitPanel = () => {
  const documentIds = currentDocuments.map(doc => doc.documentId);

  setIsSubmitting(true);

  Trading(panelState!.code, documentIds)
    .then(() => {
      setShowSuccessConfirmation(true);
      setShowModal(false); // 确保成功时关闭错误弹窗
    })
    .catch((error) => {
      // 处理Axios错误结构，兼容无response的网络错误
      const errorStatus = error.response?.status || error.status;
      // 捕获500服务器错误，可扩展其他错误码
      if (errorStatus === 500) {
        setShowModal(true);
        setShowSuccessConfirmation(false);
      } else {
        // 可选：处理其他类型错误
        console.error('请求错误:', error);
      }
    })
    .finally(() => {
      setIsSubmitting(false);
    });
};

第二步：确保Trading函数正确抛出错误 #

如果是自定义封装的请求，需要确保在服务器返回非成功状态码时主动reject错误。以下是基于Axios的封装示例：

// 示例：Trading函数的正确封装方式
const Trading = (code, documentIds) => {
  return axios.post('/api/trading', { code, documentIds })
    .then(response => {
      // 仅在2xx状态下返回数据
      if (response.status >= 200 && response.status < 300) {
        return response.data;
      } else {
        // 非成功状态主动抛出错误
        return Promise.reject(response);
      }
    })
    .catch(error => {
      // 统一处理网络错误等无response的情况
      return Promise.reject(error);
    });
};

第三步：完善状态联动（可选） #

添加对showModal的监听，确保弹窗关闭时重置相关状态：

useEffect(() => {
  if (!isOpen) {
    setShowSuccessConfirmation(false);
  }
  // 弹窗关闭时重置成功提示状态
  if (!showModal) {
    setShowSuccessConfirmation(false);
  }
}, [isOpen, showModal]);

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