Question

由于this.props和this.state可能会异步更新，因此您不应依赖于它们的值来计算下一个状态

这是否意味着我无法在任何地方信任this.state？

例如：

MyComponent extends Component {
  // ...

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

  // ...
}

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

Answer 1

设置状态为asyncchronus。如果您想对状态进行操作

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

需要回叫，您可以在状态更新后获取状态并使用更新的状态执行操作。希望对您有所帮助：）

Answer 2

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

因此，如果执行this.setState（{data：response}），则不能保证它会立即状态，可能需要一些时间来更新它。

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

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

以上是更新状态，更新后将执行回调方法。

Answer 3

这取决于您在处理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，那么您的代码就可以了。

详细了解setState Beware: React setState is asynchronous!

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

3 个答案: