Проблема с объявлением функционального компонента в React
Я пытаюсь объявить функциональный компонент в React, чтобы использовать свой собственный хук для вызовов API. Я получаю rules-of-hooks, что мой хук useGet не может быть вызван внутри обратного вызова. На мой взгляд, я объявляю функциональный компонент, я должен что-то упустить?
Пример:
export const MyComponent = () => {
const [data, setData] = useState();
useEffect(() => {
const { getData } = useGet("myUrl");
setData(getData);
}, [getData]);
return (
<div>{data}</div>
);
};
Кроме того, использование хука useState в хуках useEffect создает бесконечный цикл, поэтому вам также следует избегать этого.
Хуки нельзя вызывать внутри эффекта. Это должен быть вызов верхнего уровня внутри компонента.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Это правда, что хуки можно вызывать только в функциональных компонентах, но хуки также необходимо вызывать на верхнем уровне компонента. Вы пытаетесь вызвать useGet внутри useEffect, что не разрешено. Если я не ошибаюсь, вы, вероятно, можете просто переместить строку const {getData} = useGet("myUrl"); на 2 строки вверх, и она должна работать.
Кажется, что вы на самом деле вызываете свой пользовательский хук из обратного вызова, который находится внутри useEffect. Мы должны вызывать хуки реагирования на верхнем уровне функции компонента.
Может быть, лучше не использовать хук, а просто создать и импортировать функцию извлечения или вызвать API извлечения прямо из useEffect, как этот https://designcode.io/react-hooks-handbook-fetch-data-from-an-api
Вы правы, создав функциональный компонент.
Вернемся к официальной документации React и посмотрим на Rules of Hooks
Вызывать хуки только на верхнем уровне
Не вызывайте хуки внутри циклов, условий или вложенных функций. Вместо этого всегда используйте хуки на верхнем уровне вашей функции React. до любого раннего возвращения.
Вызов перехватчиков в любом месте, кроме верхнего уровня, приведет к неожиданному поведению.
Вы не можете вызывать хуки внутри useEffect. Просто переместите его над вызовом вот так:
const { getData } = useGet("myUrl");
useEffect(() => {
setData(getData);
}, [getData]);
Насколько я понимаю, количество хуков в вашем компоненте должно быть всегда одинаковым. Вызов некоторых в useEffect может привести к тому, что хуки иногда вызываются, а иногда нет, поскольку useEffect зависит от изменения значений переменных.
(Также, как примечание, в вашем коде в useEffect(()=>{const { getData } = useGet("myUrl");...}, [getData]) вы будете проверять изменения в переменной (getData), которая еще не объявлена. Однако это исправляется, когда вы помещаете вызов ловушки вне useEffect.)
Вы звоните
useGetвнутриuseEffect, переместитеuseGetизuseEffect.