时间戳

首页 > 解决方案 > 在 promise 内部和外部设置 state 会影响 react 中的渲染组件

javascript - 在 promise 内部和外部设置 state 会影响 react 中的渲染组件

问题描述

我使用 axios 和 promise 来获取数据。我注意到的是，当我将 setState() 函数置之不理时，即在 then() 函数中，子组件不会呈现。但是当我将相同的 setState() 函数放在 promise 中时，子组件就会完美呈现。

承诺中的 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 })

状态更新完美，但依赖于该状态的组件不会更新。谁能详细说明为什么会这样？后台发生了什么？

标签： javascriptreactjspromisereact-state

解决方案

它是一个异步函数，因此在解决承诺之前不会更新 val，并且在解决承诺之前会设置状态

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);
}

像这样设置状态

推荐阅读