我正在制作购物车样本。
每次单击时,我都会将项目的对象添加到购物车数组中。
当我第一次单击“添加购物车”按钮时,它不会更新购物车,但第二次会更新。
不过,当我单击渲染器返回语句中的 viewCart 按钮时,它会显示购物车中的准确商品数量。
请参阅下面我的代码:
我需要能够在不单击 viewCart 按钮的情况下查看购物车中的准确商品数量。产品来自本地 JSON 文件,因此我认为 JSON 文件的加载没有任何问题。
constructor (props) {
super(props);
this.state = {
Cart: []
};
this.addItem = this.addItem.bind(this);
}
addItem(productKey) {
this.setState({ Cart: [...this.state.Cart, ProductsJSON[productKey]]})
console.log(this.state.Cart);
}
viewCart() {
console.log(this.state.Cart);
}
render() {
const AllProducts = ProductsJSON;
var Products = AllProducts.map((item) => {
return (
<div className="col-4" key={item.key} >
<a onClick={() => this.addItem(item.key)} className="btn btn-primary btn-sm">Add to Cart</a>
</div>
)
})
return (
<div className="container">
<div className="row">
{Products}
<a onClick={() => this.viewCart()} className="btn btn-primary btn-sm">viewCart</a>
</div>
</div>
)
}
只是因为你没有看到它console.log
并不意味着它不会正确渲染,这里的问题是setState
is 异步,因此如果您立即 console.log 它,您将看不到它(console.log 将在状态更新之前执行),但如果您仍然想记录您的购物车,您可以这样做:
this.setState(
{ Cart: [...this.state.Cart, ProductsJSON[productKey]] },
() => console.log(this.state.Cart)
)
一旦状态更新,setState 接受一个函数作为回调。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)