我在反应容器中添加和减去函数,只要跨越' +'或者' - '点击,以计算总价格'三种产品'给出不同的价格值。
我的问题是:当我第一次点击任一按钮时,控制台首先记录初始值0,然后随后每次点击,添加或减去总数,但总是落后一步。
所以,例如,如果我点击+为'苹果,价格:2',我的控制台会记录0.然后,我点击“梨”,价格:5&#39 ;和我的控制台将记录2,添加上一次点击的值,而不是添加总计5。
我的加法和减法功能有问题吗?我在控制台登出之前更改了state.total,为什么会发生这种情况呢?
这是我的代码:
class ProductList extends React.Component {
constructor(props) {
super(props);
this.state = {
total: 0
}
this.addFunction = this.addFunction.bind(this);
this.subtractFunction = this.subtractFunction.bind(this);
}
addFunction(product) {
var x = Number(product.price)
this.setState({total: this.state.total + x});
console.log('total is ' + this.state.total)
}
subtractFunction(product) {
var x = Number(product.price)
this.setState({total: this.state.total - x});
console.log('total is ' + this.state.total)
}
render() {
var createProducts = this.props.products.map((product, i) => {
return <Product
key={i}
title={product.title}
price={product.price}
addProductSetUp={() => this.addFunction(product)}
subtractProductSetUp={() => this.subtractFunction(product)}
/>
});
return (
<div>
<ul>
{createProducts}
</ul>
</div>
);
}
}
答案 0 :(得分:1)
setState
操作是异步的,并且为了提高性能而进行批处理。这在setState
:
https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous
因此,在您的示例中,状态尚未更新。您可以使用回调来检查更新后的状态:
addFunction(product) {
var x = Number(product.price)
this.setState({total: this.state.total + x},
() => console.log('total is ' + this.state.total));
}
但在你的情况下,这并不一定有用。您只需打印出计算值
即可addFunction(product) {
var x = Number(product.price);
var total = this.state.total + x;
this.setState({total});
console.log('total is ' + total);
}
答案 1 :(得分:1)
ReactJS的setState
是asynchronous操作,这就是为什么你没有立即获得它的最新价值。
如果您需要立即访问,可以使用:
this.setState(prevState => ({
total: prevState.total + x,
}), () => {
console.log(this.state)
})