React JS: Вывод ошибок и оптимизация кода

Вывод ошибок

Для вывода ошибок необходимо установить значение ошибки в переменной состояния. В компоненте 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), если они не используют состояние.

В результате оптимизации код стал короче, чище и проще для понимания. Функциональные компоненты позволяют сократить объем кода, сохранив функциональность приложения. Вывод ошибок реализован просто и эффективно, предоставляя пользователю понятные сообщения об ошибках.

Что будем искать? Например,программа