Ответ
Вот как реализовать вызов `useFetch` по клику:
```
import { useState } from 'react';
function App() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(false);
const fetchData = async () => {
setLoading(true);
try {
const response = await fetch('https://api.example.com/data');
const json = await response.json();
setData(json);
} catch (error) {
console.error('Error:', error);
} finally {
setLoading(false);
}
};
return (
{data &&
);
}
```
Ключевые моменты:
1. Оберните fetch-логику в функцию
2. Вызывайте её по `onClick`
3. Добавьте состояния для данных и загрузки
4. Обрабатывайте ошибки и состояние загрузки {JSON.stringify(data, null, 2)}}
Ответ 18+ 🔞
Да ты посмотри, какой народ-то пошёл! Сидят, блядь, с `useState` играются, а как по кнопке тыкнуть — нихуя не понимают. Ну ладно, разжую, как бабушке на лавочке, только не матерись, а то опять заругают.
Смотри, вот тебе классика жанра, прям как в том анекдоте про Герасима и Муму, только тут не собачку топить, а данные тащить. Берёшь `useState` — это как твои карманные деньги, положил в кошелёк и помнишь, сколько там. Два состояния: одно для данных (они же твои будущие покупки), другое для флага загрузки (типа «мам, я в магазине, ща приду»).
Дальше делаешь функцию `fetchData` — это твой личный курьер, который бегает на сервер и тащит оттуда всё, что попросишь. Внутри него включаешь загрузку (`setLoading(true)`), чтоб все видели: процесс пошёл, не дергайте. Потом пытаешься получить данные через `fetch`, и если всё ок — складываешь их в состояние. Если сервер вдруг сдох или сеть сбоит — ловишь ошибку, чтоб не вылететь вникуда. И в конце, блядь, ВСЕГДА выключаешь загрузку, даже если всё пошло по пизде — иначе кнопка навеки останется в «Loading...», и пользователь охуеет.
На кнопку вешаешь вызов этой функции, и пока идёт загрузка — дизейблишь её, чтоб не дёргали, как тупых. А как данные придут — выводишь их, хоть в `pre`, хоть на хуй в трусы, это уже твои дела.
```javascript
import { useState } from 'react';
function App() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(false);
const fetchData = async () => {
setLoading(true);
try {
const response = await fetch('https://api.example.com/data');
const json = await response.json();
setData(json);
} catch (error) {
console.error('Error:', error);
} finally {
setLoading(false);
}
};
return (
{data &&
);
}
```
Вот и вся магия, ёпта. Никаких `useEffect` нахуй, просто тыкнул — получил. Как в том бородатом анекдоте: «Муму, принеси данные!» — и она бежит, если, конечно, сервер не сдох. {JSON.stringify(data, null, 2)}}