Блог

Я читал людей, пишущих об этой проблеме на разных сайтах, но их ошибки отличаются от моих. Я использую универсальный пользовательский крючок, который ни на что не влияет. useFetch Просто его использование вызывает бесконечный цикл, и я не понимаю, почему.

Вот пользовательский крючок:

 const useFetch = (config: AxiosRequestConfig) =gt; {  const [response, setResponse] = useStatelt;AxiosResponse | nullgt;(null);  const [error, setError] = useStatelt;anygt;(null);  const [loading, setLoading] = useStatelt;booleangt;(true);   config.baseURL = config.baseURL || "/api";   useEffect(() =gt; {  axios  .request(config)  .then((res) =gt; setResponse(res))  .catch((err) =gt; setError(err))  .finally(() =gt; setLoading(false));  }, [config]);   return { response, error, loading }; };  

Теперь все, что я делаю из своего компонента, — это инициализирую переменную в useFetch({url: '/endpoint'}) .

Это приводит к бесконечному циклу. Если я зарегистрирую результат в консоли, страница заполнится. Если я удалю задание для использования, оно исчезнет…

Есть идеи, что я сделал не так?

Спасибо!

Я опубликую ответ здесь на случай, если это поможет кому-то еще.

Проблема в том, что передача объекта useFetch напрямую каждый раз создает новый объект. Несмотря на то, что данные в объекте точно такие же, он каждый раз занимает новую память. Есть два простых решения, которые я могу придумать:

1. Создайте ссылку в компоненте в качестве config опции. Тогда переданный объект будет идентичным.
2. Разрушайте объект в useFetch крючке до тех пор, пока у вас не появятся основные типы данных для использования в качестве зависимостей.