@Isildur12

Функция API запроса обернутая в useCallback при вызове не тригеррит useEffect если зависимости указаны?

Здравствуйте у меня есть хук который я использую во всем своём приложении. Но у меня есть проблема которая с useCallback и useEffect. когда я вызываю функцию triggerFetch она то сама вызывается но сам хук useEffect не видит что она изменилась даже если указана зависимость. У меня есть другая реализация хука(рабочая) но у неё нету отпискиt(что для меня важно) в unmount как реализовано сдесь в useEffect.

Работа хука:
хук принимает в себя 2 аргумента:
1) Обязательный: callback функция (я её беру из своего api сервиса) которая должна вызываться в triggerFetch и useEffect после чего отдать данные
2)Опциональный: сам же аргумент который прилетает в эту же функции.
(в хуке думаю разберетесь);

Примеры использования

1 Вариант использования:
const { getPopularItemsList } = service;
const { data, loading, triggerFetch } = useData(getElementById, 5);


2 Вариант использования где-то в другой части приложении где я спускаю triggerFetch:
const { getElementById } = service;
  <button onClick={() => triggerFetch(getElementById, 2)}> Получить 2 элемент</button>


Пример фукнций в сервисе
getElementById = async id => {
    const res = await this._getResource(`${baseUrl}/lookup.php?i=${id}`);
    return res;
  };


Сама реализация хука:
import { useState, useEffect, useCallback } from 'react';

const useData = (requestData, arg) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(false);

  const triggerFetch = useCallback(() => {

    return requestData(arg);
  }, [requestData, arg]);

  useEffect(() => {
    let cancelled = false;
    // setLoading(true);

    triggerFetch().then(response => {
      if (!cancelled) {
        setData(response);
        setLoading(false);
      }

    }).catch(err => setError(true));

    return () => { cancelled = true };
  }, [triggerFetch]);

  return { data, loading, error, triggerFetch };
}

export default useData;
  • Вопрос задан
  • 28 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
01 дек. 2020, в 23:18
80000 руб./за проект
01 дек. 2020, в 22:41
60000 руб./за проект
01 дек. 2020, в 21:24
500 руб./за проект