Вот моя составляющая:
const WeatherData = () => {
const [city, setCity] = useState('')
const [unit, setUnit] = useState('imperial');
const [cardData, setCardData] = useState({});
function getForecast() {
fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&units=${unit}&appid={hidden}`)
.then(response => response.json())
.then(response => setCardData(response))}
return (
<div>
<form onSubmit={getForecast}>
<input
placeholder='Enter City'
value={city}
onChange={(e) => setCity(e.target.value)}
/>
<button type='submit'>Get Forecast</button>
</form>
</div>}
Моя проблема в том, что когда я ввожу город в свой ввод, а затем нажимаю кнопку отправки, он не обновляет состояние {city} для функции getForecast. Что не так?
Когда вы отправляете форму, вы перезагружаете всю страницу, что отменяетfetch
запрос и сбрасывает все по умолчанию.
Захватите объект события и предотвратите поведение по умолчанию.
function getForecast(e) {
e.preventDefault();
fetch...