Обнуляется state без обращения React

214
11 июня 2018, 23:30

В конструкторе объявляю state:

data: this.shuffle(this.newMassiv(25))

В componentWillMount, componentDidMount и render вызываю console.log(this.state.data).
Как видно, в didmount массив обнуляется. state.data нигде не изменяется.

Почему state.data обнуляется? Пробовал задавать значение в componentWillMount - тоже самое.

Answer 1

Нужно знать, когда будет вызван тот или иной метод.

  • constructor - конструктор для компонента React вызывается до его монтирования. Конструктор - это правильное место для инициализации состояния (state). Конструктор также часто используется для привязки обработчиков событий к экземпляру класса.

  • componentWillMount - вызывается непосредственно перед монтированием компонента и его отрисовкой (другими словами рендером - render()). Не рекомендуется вызвать метод setState внутри этого метода, обычно для инициализации стэйта используют конструктор (constructor). Данный метод считается небезопасным. Внутри него нет возможности посмотреть или обратиться к DOM элементам.

  • render - обязательный метод, сам рендеринг компонента. Код данного метода должен быть чист, что означает, что он не изменяет состояние компонента. Метод должен возвращать один и тот же результат при каждом вызове и не взаимодействует напрямую с браузером.

  • componentDidMount - вызывается сразу после монтирования компонента. Обычно используется для загрузки данных через запросы или место для настройки подписки на события. Если нужно что-то сделать с DOM-элементами, то лучше здесь, вызывается после отрисовки, а значит после render. Вызов setState в этом методе вызовет дополнительный рендеринг, но это произойдет до того, как браузер обновит экран. Это гарантирует, что даже если render() будет вызываться дважды в этом случае, пользователь не увидит промежуточное состояние.

Последовательность вызова методов такая:

  1. constructor
  2. componentWillMount
  3. render
  4. componentDidMount

Если в constructor присвоить в state какое-то значение и это значение есть в методе componentWillMount и render, но нет в componentDidMount, значит значение state обновляется где-то в недрах вашего render. Возможно вы передаете ваш state в дочерние элементы и меняете его там - такое тоже возможно. Не видя полного кода - нельзя дать конкретный ответ. Необходимо внимательно посмотреть на код и найти место, где значение меняется. Не бывает так, что до метода componentDidMount не пришел state.

READ ALSO
Почему в цикле теряется контекст?

Почему в цикле теряется контекст?

По какой-то причине теряется контекст вызова в этой части кода:

185
Как найти все элементы с одинаковым атрибутом

Как найти все элементы с одинаковым атрибутом

Как найти все теги с одинаковым атрибутом spinner и заменить им всем значение этого атрибута

205