更新类组件中的状态答案

【问题标题】：Update State in a Class Component更新类组件中的状态
【发布时间】：2022-07-19 23:13:32
【问题描述】：

private readonly maxSizeOfDownloadedFiles: number = 1000000;

state = {
  totalSum: this.maxSizeOfDownloadedFiles
};

handleCallback = () => {
  this.setState({ totalSum: 12 })
  alert('totalSum ' + this.state.totalSum);
};

当我运行 handleCallback 方法时，它不会更新 totalSum 并给我默认值，警报显示 totalSum 1000000 不是 12。那么为什么 setState 不起作用？

【问题讨论】：

setState 不会立即设置状态。状态更新是异步的，可能是批处理的，等等。
this.setState({...}, () => { // HERE the value is updated // })。如果您需要在设置后立即使用更新的值，您可以传递一个回调作为第二个参数来检查您的更新值！（仅在状态更新后调用）

标签： reactjs typescript

【解决方案1】：

您可以使用setState({} ,() => {}) 中的回调方法，该方法在状态更新后立即被调用。

private readonly maxSizeOfDownloadedFiles: number = 1000000;

state = {
  totalSum:  this.maxSizeOfDownloadedFiles
}

handleCallback = () => {
  this.setState({ totalSum: 12}, () => {
   alert('totalSum ' + this.state.totalSum);
 })
}

【讨论】：