Я изучаю React (с хуками) и хотел спросить, должен ли каждый отдельный вызов API быть внутри хука useEffect?
В моем тестовом приложении у меня есть рабочий шаблон, который выглядит следующим образом : Я устанавливаю состояние, затем после нажатия кнопки запускаю функцию, которая отправляет запрос get в мой API, и в блоке .then добавляет полученные данные в состояние.
У меня также есть хук useEffect, который выполняется только при изменении указанного состояния (используя массив зависимостей со значением состояния) и устанавливает ДРУГОЙ фрагмент состояния, используя новые данные в предыдущем состоянии. Этот второй фрагмент состояния - это то, что мое приложение отображает в блоке рендеринга.
Таким образом, выборка данных на самом деле происходит в функции, выполняемой по нажатию кнопки, а не в самом useEffect. Кажется, он работает.
Это правильный шаблон? Заранее спасибо!
Редактировать: пример, эта функция запускается по нажатию кнопки
const addClock = timezone => {
let duplicate = false;
selectedTimezones.forEach(item => {
if (item.timezone === timezone) {
alert("Timezone already selected");
duplicate = true;
return;
}
});
if (duplicate) {
return;
}
let currentURL = `http://worldtimeapi.org/api/timezone/${timezone}`;
fetch(currentURL)
.then(blob=>blob.json())
.then(data => {
setSelectedTimezones(prevState => [...prevState, data]);
}
);
}