Вывод ошибок
Для вывода ошибок необходимо установить значение ошибки в переменной состояния. В компоненте Rds проверяем наличие введенного города. Если город введен, обращаемся к API, получаем данные и устанавливаем их в состояние. Если город не введен, устанавливаем значение ошибки:
// ... предыдущий код ...
if (city) {
// Обращение к API и установка данных в state
this.setState({ data: receivedData, error: '' });
} else {
this.setState({ data: undefined, error: 'Введите название города' });
}
// ... последующий код ...
Затем это значение ошибки передается в дочерний компонент. В дочернем компоненте отображаем ошибку:
<p>{this.props.error}</p>
При получении данных значение error автоматически становится пустым, поэтому дополнительных проверок не требуется. Ошибка выводится только при её наличии.
Оптимизация кода
В React есть два типа компонентов: классовые и функциональные. Классовые компоненты используются, если требуется использование состояния (state) и методов жизненного цикла. Функциональные компоненты – более простой вариант, используемый при отсутствии состояния.
Рассмотрим оптимизацию компонента Weather. Поскольку он не использует состояние, его можно переписать как функциональный компонент:
// Классовый компонент (прежний вариант)
class Weather extends React.Component {
render() {
// ...много кода...
}
}
// Функциональный компонент (оптимизированный вариант)
const Weather = ({ props }) => (
<div>
{/* HTML код */}
</div>
);
В этом примере мы удалили весь ненужный код и оставили только необходимый HTML. Обратите внимание на обработку props. Если компонент принимает только один параметр, можно упростить синтаксис, убрав внешние скобки:
const Weather = props => <div>{/* HTML код */}</div>;
Также, если возвращается только один div, можно удалить лишние скобки:
const Weather = props => <><{/* HTML код */}></>;
Аналогичная оптимизация может быть применена и к другим компонентам (Info, Form), если они не используют состояние.
В результате оптимизации код стал короче, чище и проще для понимания. Функциональные компоненты позволяют сократить объем кода, сохранив функциональность приложения. Вывод ошибок реализован просто и эффективно, предоставляя пользователю понятные сообщения об ошибках.