Создание компонента с состоянием
Одна из наиболее важных тем в React - это состояния (state). Состояние может в себя включать любые
данные, о которых должно знать ваше приложение, которые могут со временем меняться. По сути своей state - это
обычный объект. Состояния нужны, чтобы ваши приложения отвечали на изменения состояния и при необходимости обновляли
интерфейс. React предлагает хорошее решение для управления состояниями в современных веб-приложениях. Вы создаете
состояние в компоненте React, объявляя свойство state в классе компонента в его методе
constructor . Это инициализирует компонент со свойством state при его создании. Объявление
выглядит следующим образом:
constructor(props) {
super(props);
this.state = {
// описываем ваше состояние здесь
}
}
state на протяжении всего срока службы вашего компонента. Вы можете обновить
его, отобразить в пользовательском интерфейсе и передать его в качестве свойств в дочерние компоненты. Объект
state может быть как сложным, так и простым, как вам нужно. Обратите внимание, что вы должны создать
компонент класса за счет расширения React.Component для того , чтобы создать state.
Замечание: на самом деле свойство this.state напрямую менять нельзя. Для изменения состояния используется специальный метод this.setState(), который будет рассматриваться далее. Но важно понимать, что даже с использованияем этого метода, мы не меняем свойство this.state, а создаем новое. То есть в метод this.setState() мы передаем новые значения состояния, Реакт делает копию текущего состояния (и это уже новый объект состояния) и дописывает переданные нами свойства в него (дополняя или обновляя его свойства). Это очень важно понимать.
В редакторе кода есть компонент, который пытается отобразить свойство name из своего state . Однако state не определено. Инициализируйте компонент с state в constructor и присвойте свое имя свойству name .