Этот урок демонстрирует вывод информации о погоде в компоненте React. Необходима переменная — объект, хранящий данные, полученные после запроса к URL, для передачи в компонент отображения.
Создание объекта State
Для хранения данных используется объект state. Он содержит:
- temp: температура (изначально undefined)
- city: имя города (изначально undefined)
- country: код страны (изначально undefined)
- sunrise: время восхода солнца (изначально undefined)
- sunset: время заката солнца (изначально undefined)
- error: переменная для хранения сообщений об ошибках (изначально пустая строка).
this.state = {
temp: undefined,
city: undefined,
country: undefined,
sunrise: undefined,
sunset: undefined,
error: ""
};Установка значений State
Метод setState устанавливает значения. После получения данных о погоде (объект data):
this.setState({
temp: data.main.temp,
city: data.name,
country: data.sys.country,
sunrise: data.sys.sunrise,
sunset: data.sys.sunset,
error: ""
});Передача данных в компонент
Данные передаются в компонент Weather через свойства:
<Weather
temp={this.state.temp}
city={this.state.city}
country={this.state.country}
sunrise={this.state.sunrise}
sunset={this.state.sunset}
error={this.state.error}
/>Компонент Weather принимает данные через this.props:
<p>Город: {this.props.city}</p>
<p>Страна: {this.props.country}</p>
<p>Температура: {this.props.temp}°</p>
<p>Восход солнца: {this.props.sunrise}</p>
<p>Закат солнца: {this.props.sunset}</p>Условное отображение данных
Условный оператор в JSX предотвращает отображение undefined значений:
{this.props.city && (
<>
<p>Город: {this.props.city}</p>
<p>Страна: {this.props.country}</p>
<p>Температура: {this.props.temp}°</p>
<p>Восход солнца: {this.props.sunrise}</p>
<p>Закат солнца: {this.props.sunset}</p>
<>
)}Информация отображается только если this.props.city определено. <> позволяет возвращать несколько элементов JSX. Необходимо обернуть код в один родительский элемент (например, <div>).
Обработка ошибок и проверка ввода
Проверка в компоненте App обрабатывает ошибки и предотвращает обращение к несуществующим свойствам:
if (city) {
// Обращение к API и установка state
}Запрос к API и установка state происходят только при вводе данных пользователем.
Преобразование timestamp в дату
Для преобразования timestamp в читаемый формат даты используется соответствующая функция (реализация не приведена).
Замена Sunrise на Pressure
sunrise заменен на pressure (давление) в отображении данных.
Урок показал вывод данных о погоде с использованием компонентов React, обработку ошибок и условное отображение информации. Это позволяет создавать динамические интерфейсы, отображающие информацию из внешних источников.