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

【问题标题】：Setting state inside promise and outside promise affects on rendering component in react在 promise 内部和外部设置 state 会影响 react 中的渲染组件
【发布时间】：2019-09-27 05:23:51
【问题描述】：

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

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

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

【问题讨论】：

你在哪里定义了这个请求？
由于异步，当您将 setState 放入 promise 时，它首先调用您的 api，然后获取响应并将响应设置为 state，在第二种情况下，当您将 setState 放在 promise 之外时，它将执行 axios 请求和同时设置状态。
@chauhanamit 在这两种情况下都会更新状态，但渲染组件之间存在差异。当 setState() 在 promise 中时，子组件会渲染，那么为什么在第二种情况下子组件没有渲染？
Axios 返回一个 Promise，并且 Promise 是异步的，所以在第二个例子中，因为它没有出现在你 await 要解决的 Promise 中，javascript 很高兴地不断通过函数并将状态设置为val 的当前值，您将其设置为 0。
@RohitSawai 你能分享一个工作沙箱吗？

标签： javascript reactjs promise react-state

【解决方案1】：

它是一个异步函数，所以在 promise 解决之前不会更新 val，并且会在 promise 解决之前设置状态

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

这样设置状态

【讨论】：

我也使用了 async 和 await 来首先解决 Promise。但这对我也不起作用。
我明白你想说什么。告诉我一件事，为什么 async 和 await 在我的情况下不起作用，就像在 await 部分一样，promise 完全解析，然后执行它之后的代码。