javascript - data.json不是reactjs使用Fetch API的函数

Question

我有使用 fetch api 的删除函数，但在删除时，我收到此错误，data.json 不是函数

这是我的代码

export const deleteLeaveType = async id => {
  const response = await fetch(
   `${API_LINK}/route/route/route/${id}`, {
    method: 'delete',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${Auth.getToken()}`,
     },
   }
  );
  return getData(response);
};

我在另一个文件中调用它

const deleteLeaveType = async id => {
  let deleteLeaveType = isLeaveType.filter(
    item => item.id !== id
  );

  await CalendarManagementAPI.deleteLeaveType(id)
    .then(data => {
      console.log(data.json());
      setLeaveType(deleteLeaveType);
    });
    setLoadingLeaveTypes(false);
    fetchLeaveTypes();
  })
  .catch(error => {
    console.log(error);
  });
};

Answer 1

主要问题:

您遇到的主要问题是，在您的顶级 deleteLeaveType 函数中，您以 return getData(response) 结束，而不是仅返回您想要的任何内容从您的 fetch 请求收到。

从 the docs 可以看出，使用 fetch 的正常方法是只执行 const response = wait fetch(...) (正如您已经完成的那样)，然后在调用之后立即执行 >data.json() (顺便说一句，这是另一个异步函数)。但是，您的 getData(response) 函数可能没有完全返回您所期望的结果。

其他评论:

正如评论中提到的，您可能不应该与 .then() 同时使用 async/await。这是处理异步函数的两种不同方法，因此一次只能使用一种方法。

在您的 deleteLeaveType 函数中，如果您更喜欢使用 .then 来处理异步函数，您可以删除或 async 和 await 像这样:

// remove 'async' from function declaration
const deleteLeaveType = id => {
  // keep original code      

  // remove 'await'
  CalendarManagementAPI.deleteLeaveType(id)
    .then(data => {
      // ... everything else the same
};

OR 以正确的方式使用 async/await，就像您在第一个 deleteLeaveType 中使用的那样问题，请执行以下操作:

const deleteLeaveType = async id => {
  let deleteLeaveType = isLeaveType.filter(
    item => item.id !== id
  );

  let data = await CalendarManagementAPI.deleteLeaveType(id);

  // ... the rest of your code
};

这里有一篇有趣的文章，解释了使用 async/await 进行错误处理的一些想法，如果您感兴趣的话:Better error handling with async / await

我还建议不要对两个函数和一个数组使用相同的变量名deleteLeaveType。对于您在任何给定时刻所引用的内容，这可能会有点令人困惑。