反应异步并设置状态

时间:2019-08-07 23:41:44

标签: reactjs state setstate

我的状态中有一个总计集,初始化为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);
}

2 个答案:

答案 0 :(得分:4)

由于您正在调用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方法中。然后,您应该获得期望的值。

答案 1 :(得分:0)

对于一个,您只需调用一次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))
}