我正在研究购物车样本。

每次单击时，我都将项目的对象添加到Cart数组中。第一次单击添加购物车按钮时，它不会更新购物车，但是会第二次更新。

虽然，当我单击渲染器的return语句中的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>
    )
}