typescript 在axios delete调用后,Mobx操作方法根本不运行

ohtdti5x  于 2023-01-18  发布在  TypeScript
关注(0)|答案(1)|浏览(94)

调用TaskStore.fetchTasks()之前一切正常,数据从数据库中删除,但如果我控制台记录了axios delete调用之后的任何内容,它甚至不会显示,这导致组件无法重新呈现,因为存储中的可观察对象没有用没有删除值的新数据更新。
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);
    }
  };

获取任务:

@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);
    }
  };
anhgbhbe

anhgbhbe1#

一般来说,你必须为来自API的数据创建类型,然后从类型创建一个空的对象数组,然后检查已解决的函数,这样做,你的问题就解决了。

//Your Code  
   @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);
             }
           };

您的组件

// Here you just call your delete function from task store and that's all

export default function DeleteTask(value?: any) {
  const deleteTask = async (e: any) => {
    e.preventDefault();
    try {
      TaskStore.deleteTask(data);
    } catch (error: Error | any) {
      console.log(error);
    }
  };

首先要解决的代码必须为来自API的数据创建一个类型

// create Type to get data from api and store in it
       interface Tasks {
                        // here any fields you get from api set here
                        id: number;
                        name: string;
                        // etc
                       }

从类型创建空数组对象

TasksList: Tasks[] = []; // for task List

您的固定功能

// added New Delete Function

@action deleteTask = async (data: any) => {
    try {
      await axios.delete(`http://localhost:5000/test`, {
        data,
      });
      runInAction(() => {
       this.fetchTasks();
      });
    } catch (error) {
      console.log(error);
    }
  };

获取函数

@action  fetchTasks = async () => {
      try {
          // define your type for axios 
        const response = await axios.get<Tasks[]>('http://localhost:5000/test');
        this.TasksList = []; // Bring it out from Run in action
      runInAction(() => {
        // add Data with response in below line
        this.TasksList = response.data; //just sample assign response to Task List
         });
     } catch (error) {
         console.error(error);
                     }
     };

相关问题