const App = () => {
const [state, setState] = useState(0);
// используем тогда, когда нужно установить значенее, которое не зависит от state
setState(1);
setState((prevState) => {
return prevState + 1;
// мы могли б написать return state + 1,
// но тогда б мы не были б уверены, что там именно прошлый state (возможно, он еще не обновился)
});
};
// --------------------------- ИЗ ПЕРВОГО КОМПОНЕНТА ---------------------------
return(
<>
<Info />
<Form weatherMethod={gettingWeather} />
<Weather />
</>
)
// --------------------------- ИЗ ВТОРОГО КОМПОНЕНТА ---------------------------
function Form({weatherMethod}) {
return(
<form onSubmit={weatherMethod}>
<input type="text" name="city" placeholder="Город"/>
<button>Получить погоду</button>
</form>
)
}
import {useState, useCallback} from 'react';
export default () => {
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const request = useCallback(async (url, method = `GET`, body = null, headers = {}) => {
setLoading(true);
try {
if (body) {
body = JSON.stringify(body);
headers[`Content-Type`] = `application/json`;
}
const response = await fetch(url, { method, body, headers });
const data = await response.json();
if (!response.ok) {
throw new Error(data.message || 'Something went wrong');
}
setLoading(false);
return data;
} catch (e) {
setLoading(false);
setError(e.message);
throw e;
}
}, []);
const clearError = useCallback(() => setError(null), []);
return {loading, request, error, clearError}
}
const {loading, request, error, clearError} = useHttp();
const handler = async () => {
const response = await request(`/api/auth/login`, `POST`, {...form}); // можно четвертым передать headers
}
if (loading) {} // если грузятся данние
if (error) {} // если прозойшла ошибка