ReactJS实现删除失败时的“无法删除”提示功能方案咨询

首先要确保你的后端在遇到外键约束无法删除时，返回非2xx的HTTP状态码（比如409冲突），这样前端的axios会自动进入catch分支。

然后修改你的React方法，调整逻辑并使用原生窗口函数给用户提示：

methods: {
    async deleteStatus(id) {
         try {
           if (window.confirm("Do you really want to delete?")){
               await axios.delete(`http://localhost:5000/delete-status/${id}`);
               // 仅删除成功时刷新页面
               window.location.reload();
           }
         } catch (err) {
           // 根据后端返回的错误状态码判断场景
           if (err.response?.status === 409) { // 假设后端用409表示外键约束冲突
               window.alert("无法删除");
           } else {
               console.log(err);
               window.alert("删除失败，请稍后重试");
           }
         }
      },
  },

关键调整说明 #

• 把页面刷新操作移到删除请求成功之后，避免删除失败时也刷新页面，导致用户看不到错误提示
• 使用window.alert()这个原生窗口函数直接弹出错误消息，这是最简便的原生提示方案
• 如果后端返回了更具体的错误文本（比如响应体里的message字段），也可以改成window.alert(err.response.data.message)，显示更精准的提示

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