Блог

Главная - Вопросы по программированию - Недопустимый вызов перехвата при вызове асинхронного API

Недопустимый вызов перехвата при вызове асинхронного API

#javascript #reactjs #react-native #react-redux #react-hooks

#javascript #reactjs #react-native #реагирование-сокращение #реагирующие перехваты

Вопрос:

Я пытаюсь использовать перехват реакции, подобный useMemo или useEffect внутри моего функционального компонента. Вызов API является асинхронным, и я думаю, что это может быть причиной ошибки.

Файл службы:

 export const getData = (): wretch =>
  fetch('/d/get_data')
    .get()
    .json();

Файл логики форматирования данных:

 import {getData} from './services';

export const formatData = (onClick, onSort) => {
  // logic here - omitted
  const formattedData = [];
  return getData().then(res => {
    res.forEach( 
      // more data formatting logic
    )
    return {formattedData: formattedData, originalData: res};
})};

Файл рендеринга:

 import {formatData} from './formatData';

const MyTable = () => {
  useEffect(() => formatData({onClick: handleClick, onSort: handleSort}).then(res => setData(res)), []);

Сообщение об ошибке:

введите описание изображения здесь

Комментарии:

1. является ли MyTable компонентом React? Возвращает ли он jsx?

Ответ №1:

Вы правы в той части, где вы не можете использовать асинхронный код в своем useEffect. Рабочий процесс для этого аналогичен тому, что вы делаете.

 useEffect(() => {

  async function myfunc(){
    // Do async work
    const response = await apiCall();
    setData(response);

  }
  myFunc();
},[])

Возможно, это не ответ на ваш вопрос, но это распространенный шаблон, который может оказаться полезным 🙂

Ответ №2:

Пожалуйста, попробуйте это.

 const MyTable = () => {
  useEffect(async () => {
    const data = await formatData({onClick: handleClick, onSort: handleSort});
    setData(data);
  },
  []);
}