Question

我的状态中有一个总计集，初始化为0。

这里是函数（通过一个在另一个组件中赋予其qty参数的输入字段触发）：

calculateTotal(qty) {
  if (qty === 1) {
    this.setState({
      total: this.state.total += 250
    })
  }
  else if (qty > 1) {
    this.setState({
      total: qty *= 250
    })
  }
  else {
    this.setState({total: this.state.total})
  }
  console.log(this.state.total);
}

Answer 1

由于您正在调用setState，所以我假设您的代码代表更大组件的一种方法。

setState是一个异步操作，因此您的console.log可能在组件状态更新之前被调用。但是，如果您尝试使用组件的console.log方法中的render，则将获得更多可预测的结果。

由于您应该使用setState来更新状态而不是直接对其进行更改，因此您不应这样做：

this.state.total += 250

这会尝试直接更新total，从而有效地绕过setState。通常，您通常希望这样做：

this.setState({
  total: this.state.total + 250
})

但是，这也是不正确的，因为您要基于先前的状态来计算新的状态。为了确保获得先前的状态（due to the asynchronous nature of setState），您应该改为执行以下操作：

this.setState((prevState) => {
  return {
    total: prevState.total + 250
  }
})

也不需要this.setState({total: this.state.total})。如果您不想更改状态，只需不执行任何操作。

最后，当组件的状态已更新时，React框架将重新渲染您的组件。因此，尝试将total登录到组件的render方法中。然后，您应该获得期望的值。

Answer 2

对于一个，您只需调用一次setState。而且setState与控制台日志一样是异步的，因此为了确保在设置状态后日志正在运行，请使用带有setstate的回调

calculateTotal(qty) {
  var total;
  if (qty === 1) {
    total = this.state.total + 250; // total = total + 250
  }
  else if (qty > 1) {
    total = (qty * 250);  // total = qty * 250
  }
  else {
    total = this.state.total;
  }
  this.setState({ total }, () => console.log(this.state.total))
}

反应异步并设置状态

2 个答案: