Axios Delete调用后Mobx Action方法完全不执行的问题

调用TaskStore.fetchTasks()前流程完全正常，数据库内的数据已成功删除，但Axios Delete请求之后的所有console.log都无法输出，组件因此无法重新渲染——核心原因是Store中的Observable未更新为删除操作后的新数据。

相关代码 #

DeleteTask.tsx #

export default function DeleteTask(value?: any) {
  const deleteTask = async (e: any) => {
    e.preventDefault();
    try {
      let data = { task: value.value.task };
      await axios.delete(`http://localhost:5000/test`, {
        data,
      });

      await TaskStore.fetchTasks();
    } catch (error: Error | any) {
      console.log(error);
    }
  };
}

TaskStore中的fetchTasks方法 #

@action fetchTasks = async () => {
    try {
      const response: any = await axios.get('http://localhost:5000/test');
      runInAction(() => {
        this.tasks = [];
        console.log('before pushing' + this.tasks);
        this.tasks.push(...response.data.recordset);
        console.log('after pushing' + this.tasks);
      });
    } catch (error) {
      console.error(error);
    }
  };

1. 验证Delete请求的完整性
   虽然数据库数据已删除，但Axios的Delete调用可能因后端返回非2xx状态码（如404、500）抛出异常，且现有代码的错误捕获逻辑未完整输出信息。修改Delete请求部分，添加响应日志并完善错误捕获：

   const deleteRes = await axios.delete(`http://localhost:5000/test`, { data });
   console.log('Delete请求响应:', deleteRes);
   

   同时将catch块的日志改为：

   catch (error: Error | any) {
     console.error('删除操作出错:', error.response || error);
   }
   

2. 检查fetchTasks的执行异常
   若Delete请求正常，但fetchTasks内的日志无输出，需确认：

   • fetchTasks自身catch块的console.error(error)是否有输出，判断是否为请求或数据处理异常；
   • 确认this指向正确（当前代码用箭头函数已规避绑定问题）；
   • 验证TaskStore是否为全局单例——若调用的是新实例的fetchTasks，修改的并非组件订阅的Store实例，自然不会触发渲染。

3. 优化数据更新逻辑（可选）
   既然已确认数据库数据已删除，可跳过重新请求，直接修改Store内的tasks数组，避免请求带来的不确定性：

   await axios.delete(`http://localhost:5000/test`, { data });
   // 假设value.value.task包含唯一标识id
   runInAction(() => {
     TaskStore.tasks = TaskStore.tasks.filter(task => task.id !== value.value.task.id);
   });
   

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