Не удается увидеть данные в componentWillMount()?

Question

Я делаю .get() запрос в Jquery и обновил состояние, а также.

Мой вопрос:

Почему я не могу увидеть данные в console.log(this.state.storage) в componentWillMount() так же как componentDidMount() но я получаю вывод в render()?

Также мне нужно будет выполнять операции с извлеченными данными, в каком жизненном цикле я должен это делать?

constructor() {
  super();
  this.state = {
    storage: []
  }
}

componentWillMount() {
  $.get('data.csv', (data) => this.setState({
    storage: data
  }));
  console.log(this.state.storage); //No Output
}

componentDidMount() {
  console.log(this.state.storage); //No Output
}

render() {
    return ( 
    <div >{this.state.storage}</div> //Do get the Output
    );

Answer 1

this.setState асинхронно обновляет состояние компонента; документация здесь. Если вы хотите увидеть изменения, внесенные this.setState Затем вы должны передать обратный вызов для вызова функции

Кроме того, вы можете выполнять свои действия в обратном вызове $.get метод, как показано ниже

constructor() {
  super();
  this.state = {
    storage: []
  }
}

myCustomOperations = (data) => {
  // do custom operations here with data
}

componentWillMount() {
  $.get('data.csv', (data) => {
    this.myCustomOperation(data);
    this.setState({
      storage: data
    }, () => {
      console.log(this.state.storage); // correct output
      // this.myCustomOperation(this.state.storage) // if you want to do the custom operation after the data has been put into the state
    });
  });
  console.log(this.state.storage); //No Output
}

componentDidMount() {
  console.log(this.state.storage); //No Output
}

render() {
    return ( 
    <div >{this.state.storage}</div> //Do get the Output
    );