Почему не читается state в реакт?

Question

[Влад]

Не пойму, почему не читается стейт
Когда я вывожу в консоль при Инициализации стейта, то все прекрасно и все выводится
но в рендере консоль уже дальше "form" ничего не видит

import React, { Component, Fragment } from "react";
import Form from "./components/Form.js";
class App extends Component {
  constructor() {
    super();
    this.state = {
      components: {},
      form: {},
      data: {}
    };
  }

  async componentDidMount() {
    let response = await fetch(
      "https://gist.githubusercontent.com/alexandrov-va/7f353ca822d074d7ce22d3af3d13696f/raw/0907091de6fedf6153cdb718f32a4215dc2c53cf/page.json"
    );

      let data = await response.json();
      this.setState({
        components: data.components,
        form: data.form,
        data
      });
      console.log(data.form.submit_button.text);

  }

  render() {
    console.log(this.state.data.form.submit_button.text)
    return (
      <Fragment>
        <Form  />
      </Fragment>
    );
  }
}
export default App;

просто если я в рендере ввиду в консоль console.log(this.state.data) то он в консоли спокойно даст объект и без всяких ошибок , но если я ввожу console.log(this.state.data.form.submit_button.text) то выводится ошибка TypeError: Cannot read property 'submit_button' of undefined

Comments

[Athanor]

А что пишет? form undefined?

[Петр Мухуров]

подозреваю, что на этой строке

console.log(this.state.data.form.submit_button.text)

падает render, т. к. при первом рендере this.state.data.form === undefined, и обращение глубже кинет ошибку
кроме того,

constructor(props) {
  super(props);
  ...
}

Answer 1

[abberati]

Потому что данные приходят асинхронно и при первом рендере стейт буквально вот такой:

this.state = {
      components: {},
      form: {},
      data: {}
    };

вы его таким инициализируете

Answer 2

[Михаил]

Потому что fetch - это ассинхронная функция.
В функции componentDidMount функция this.setState вызовется только когда придет ответ от запроса https://gist.githubusercontent..... Т.е. сначала вызовется рендер и в консоли this.state.form покажет пустой объект, а позднее, после выполнения запроса, this.state.form уже примет новое значение .

Answer 3

[Влад]

просто если я в рендере ввиду в консоль console.log(this.state.data) то он в консоли спокойно даст объект и без всяких ошибок , но если я ввожу console.log(this.state.data.form.submit_button.text) то выводится ошибка TypeError: Cannot read property 'submit_button' of undefined

Comments

[Михаил]

Правильно, когда выполняется render, в объекте this.state.data еще не существует ни свойства form, ни form.submit_button. Оно появится позже когда выполнится функция this.setState, а она выполнится когда придет ответ с сервера.

[abberati]

А вы посмотрите, сколько раз срабатывает лог.