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