У меня есть поле ввода в которое я ввожу название города и после этого получаю координаты города и прогноз погоды. Для этого я создал функциональную компоненту Content
в которой с помощью библиотеки axios
получаю ответы от сервера. Изначально у меня установлено 2 состояния компонента:
const [coordinates, setCoordinates] = useState([{
lat: 0,
lng: 0
}]);
const [forecast, setForecast] = useState([{
dt: 0,
day: 0,
max: 0,
min: 0,
eve: 0,
morning: 0,
night: 0,
main: '',
description: '',
icon: '',
sunrise: 0,
sunset: 0
}]);
После того, как я получаю из поля ввода название города я отправляю GET
запрос по ссылке:
https://maps.googleapis.com/maps/api/geocode/json?address=${YOUR_CITY_NAME}&key=${YOUR_TOKEN}
И получаю координаты города: lat
и lng
соответственно. И дальше я пытаюсь запихнуть их в стейт coordinates
.
После этого делаю запрос, но уже на сервер Open Weather Map:
https://api.openweathermap.org/data/2.5/onecalllat=${coordinates.lat}&lon=${coordinates.lng}&exclude=hourly,minutely&appid=${YOUR_TOKEN}
Проблема в том, что при первом запросе у меня в coordinates.lat
и coordinates.lng
дефолтное значени, т.е 0. Почему-то новый стейт присваивается только после второго нажатия на кнопку вызова функции. И, если, я например введу в инпут "Киев", то получу погоду по координатам lat = 0, lng = 0 и после этого введу в инпут "Москва", то получу погоду по координатам киева, т.е прошлый стейт. Как это исправить? Вот весь код:
import React from 'react';
import { useState } from 'react';
import Forecast from './Forecast';
import '../style/Content.css';
const axios = require('axios').default;
const moment = require('moment');
const Content = () => {
const [coordinates, setCoordinates] = useState([{
lat: 0,
lng: 0
}]);
const [forecast, setForecast] = useState([{
dt: 0,
day: 0,
max: 0,
min: 0,
eve: 0,
morning: 0,
night: 0,
main: '',
description: '',
icon: '',
sunrise: 0,
sunset: 0
}]);
let inputValue = React.createRef();
const getCityName = () => inputValue.current.value;
const getForecastData = async () => {
axios.get(`https://maps.googleapis.com/maps/api/geocode/json?address=${getCityName()}&key=${YOUR_TOKEN}`)
.then(async (res) => {
const newCoordinates = {
lat: await res.data.results[0].geometry.location.lat,
lng: await res.data.results[0].geometry.location.lng
}
console.log(newCoordinates.lat, newCoordinates.lng);
setCoordinates(newCoordinates);
console.log(coordinates);
})
.catch(err => {
console.error(err);
});
setTimeout(() => {
axios.get(`https://api.openweathermap.org/data/2.5/onecall?lat=${coordinates.lat}&lon=${coordinates.lng}&exclude=hourly,minutely&appid=${YOUR_TOKEN}`)
.then(res => {
console.log(res);
const newWeather = {
day: Math.floor(res.data.daily[0].temp.day - 273),
max: Math.floor(res.data.daily[0].temp.max - 273),
min: Math.floor(res.data.daily[0].temp.min - 273),
eve: Math.floor(res.data.daily[0].temp.eve - 273),
morning: Math.floor(res.data.daily[0].temp.morn - 273),
night: Math.floor(res.data.daily[0].temp.night - 273),
main: res.data.daily[0].weather[0].main,
description: res.data.daily[0].weather[0].description,
icon: res.data.daily[0].weather[0].icon,
dt: moment(res.data.daily[0].dt, 'X').format('dddd, DD MMM'),
sunrise: moment(res.data.daily[0].sunrise, 'X').format('dddd, HH:mm'),
sunset: moment(res.data.daily[0].sunset, 'X').format('dddd, HH:mm')
}
setForecast(newWeather);
console.log(forecast);
})
.catch(err => {
console.error(err);
})
}, 500);
}
return (
<div className='content'>
<div>
<input type='text' ref={inputValue} placeholder='City name'></input>
<button className="btn" onClick={getForecastData}>Go</button>
</div>
<Forecast />
</div>
);
}
export default Content;