[英]React: state not updating on first click
我正在研究购物车样本。
每次单击时,我都会将项目的一个对象添加到 Cart 数组中。 当我第一次点击添加购物车按钮时,它不会更新购物车,但会在第二次时更新。
虽然,当我在渲染的返回语句中单击 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
是异步的,因此如果你立即 console.log 就不会看到它( console.log 会在更新状态之前执行),但是如果你仍然想记录你的购物车,你可以这样做:
this.setState(
{ Cart: [...this.state.Cart, ProductsJSON[productKey]] },
() => console.log(this.state.Cart)
)
状态更新后,setState 接受一个函数作为回调。
Arber 的解决方案是有道理的,但当我尝试它时,它产生了一个控制台警告说:
来自 useState() 和 useReducer() Hook 的状态更新不支持第二个回调参数。 要在渲染后执行副作用,请使用 useEffect() 在组件主体中声明它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.