Установка состояния внутри обещания и внешнего обещания влияет на рендеринг компонента в реакции

Question

Я использовал axios и обещание для получения данных.То, что я заметил, - когда я помещаю функцию setState () вне обещания, то есть в функцию then (), дочерний компонент не отображается.Но когда я помещаю ту же функцию setState () внутри обещания, тогда дочерний компонент прекрасно отрисовывается.

setState () внутри обещания

    axios({
            method: 'POST',
            contentType: 'application/json',
            url: 'url',
            data: data
        }).then(function (response) {
            this.setState({
           stateItem: response.data.obj
    })}.bind(this)).catch(error){
console.log(error);
} 

Выше программа может отрисовывать stateItem отлично.

setState () вне обещания

let val = 0;
axios({
       method: 'POST',
       contentType: 'application/json',
       url: 'url',
       data: data
     }).then(function (response) {
        val = response.data[0].value;
        }.bind(this)).catch(error){
          console.log(error);
    } 
this.setState({ stateItem: val })

Состояние обновляется идеально, но компонент, зависящий от этого состояния, не обновляется.Кто-нибудь может объяснить мне, почему это происходит?Что происходит в фоновом режиме?

Answer 1

это асинхронная функция, так что вал не будет обновляться, пока обещание не будет решено, и состояние будет установлено до обещания не будет решено

let val = 0;
axios({
   method: 'POST',
   contentType: 'application/json',
   url: 'url',
   data: data
 }).then(function (response) {
    val = response.data[0].value;
    this.setState({ stateItem: val })
    }.bind(this)).catch(error){
      console.log(error);
} 

установить состояние, как это