data.json не является функцией реагирования с использованием Fetch API - PullRequest
Новая
       18

data.json не является функцией реагирования с использованием Fetch API

1 голос
/ 02 ноября 2019

У меня есть функция удаления с использованием fetch api, но при удалении я получаю эту ошибку, data.json is not a function

Это мой код 

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

1 Ответ

0 голосов
/ 02 ноября 2019

Основная проблема:

Основная проблема, с которой вы сталкиваетесь, заключается в том, что в вашей главной функции deleteLeaveType вы заканчиваете return getData(response), а не просто возвращаете то, что получили от вашего fetch request.

Как вы можете видеть из документов , обычный способ использования fetch - это просто сделать const response = await fetch(...) (как вы уже сделали), а затем сразу послевызов data.json() (кстати, еще одна асинхронная функция). Однако ваша getData(response) функция, вероятно, не возвращает именно то, что вы ожидаете.

Другие комментарии:

Как уже упоминалось в комментариях, вам, вероятно, не следует использовать async / await одновременно с .then(). Это два разных способа обработки асинхронных функций, поэтому за один раз следует использовать только один.

В вашей 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
};

ИЛИ для правильного использования 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, если вам интересно: Лучшая обработка ошибок с помощью async / await

Я бы также рекомендовал не использовать одно и то же имя переменной deleteLeaveType для двух функций и массива. Это может немного запутать то, на что вы ссылаетесь в данный момент времени.

...