是否可能 this.state 尚未在 handleClick 函数中更新？答案

【问题标题】：Is it possible that this.state has not been updated yet in a handleClick function?是否可能 this.state 尚未在 handleClick 函数中更新？
【发布时间】：2019-07-20 16:31:21
【问题描述】：

React Doc 说

因为 this.props 和 this.state 可能是异步更新的，所以你不应该依赖它们的值来计算下一个状态

这是否意味着我在任何地方都不能信任 this.state？

例如：

MyComponent extends Component {
  // ...

  handleClick () {
    // ...
    fetch(targetUrl, {
      method: 'POST',
      body: JSON.stringify({
        param1: this.state.param1
      })
    })
  }

  // ...
}

这是否意味着我可能会向 targetUrl 发送错误的 param1（因为 this.state 可能尚未更新）？

【问题讨论】：

不，状态是异步的，这意味着例如，如果您从外部 API 获取某些内容，它将发送响应，因此获取响应所需的时间可能会有所不同！因此，根据 state ，因为它是异步的，所以它只是转到其他方法而不是等到响应到来！因此，在您确定收到响应之前，您不能只转发状态！

标签： javascript reactjs

【解决方案1】：

这意味着 this.setState({}) 异步更新状态，而不是立即更新。 Reaat 将通过 this.setState({}) 决定何时更新状态。

所以如果你这样做了this.setState({data: response})，不保证它会立即状态，可能需要一些时间来更新它。

您可以使用以下代码进行检查：

this.setState({data: response}, () => console.log('state updated'));

上面是更新状态，更新后会执行回调方法。

【讨论】：

【解决方案2】：

这取决于你在handleClick时做什么。

如果你的handleClick 方法是这样的：

handleClick () {
    this.setState({ param1: 'something'});
    fetch(targetUrl, {
      method: 'POST',
      body: JSON.stringify({
        param1: this.state.param1
      })
    })
  }

然后当您调用fetch 时，this.state.param1 尚未更新。因为setState 是异步的。

如果你不在 handleClick 中setState，那么你的代码就可以了。

阅读更多关于setStateBeware: React setState is asynchronous!

【讨论】：

让我困惑的是第二种情况。既然this.setState和handleClick都是异步的，那handleClick有没有可能在this.setState之前被调用呢？我先看这篇文章，谢谢。
你是指handleClick方法被重复调用，然后setState被连续同时调用的情况，对吧？ React 批处理发生在事件处理程序和生命周期方法中的状态更新。因此，如果您在
处理程序中多次更新状态，React 将在重新渲染之前等待事件处理完成。看看这个答案：stackoverflow.com/a/33613918/4327170

【解决方案3】：

设置状态为 asyncchronus 。如果你想对状态做一些事情，比如

     this.setState({param1:true},()=>{
     fetch(targetUrl, {
     method: 'POST',
    body: JSON.stringify({
    param1: this.state.param1
     })
     })
     })

它需要一个回调，您可以在状态更新后获取状态并使用更新后的状态执行操作..希望它有所帮助:)

【讨论】：