点击单个商品,在购物车中添加所有产品

时间:2017-07-13 08:35:16

标签: reactjs meteor

我正在使用Meteor和React创建电子商务应用,但在购物车中添加产品时遇到一些问题。

1.在将单个产品添加到购物车时,所有产品都会添加到购物车中。

2.添加产品后,产品无法再次添加,Meteor显示错误:409的ID相同。

以下是代码:

这是在购物车集合中添加产品的功能。

for {
    command := GetCommandFromUser()
    if command == ExitCommand {
        break
    }

    ProcessCommand(command)
}

我正在使用此函数调用,同时在按钮的单击事件上呈现页面上的产品:

addToCart() {
    if(Meteor.userId()) {
        return this.state.productsList.map((product) => {
            Carts.insert({
                _id:product._id,
                itemName: product.itemName,
                itemDesc:product.itemDesc,
                uploadedAt:new Date().getTime(),
                price:product.price,
                addedBy:Meteor.userId()
            });
        });
    }else{
        console.log('Please login to add this product');
    }
}

请告诉我如何解决这些错误。

1 个答案:

答案 0 :(得分:1)

因为您正在使用map并添加所有产品而非所点击的产品。

解决问题:

1。首先在onClick方法中传递每个产​​品的唯一值:

<button onClick={this.addToCart.bind(this, product._id)}>Add to Cart</button>

2. 然后使用forEach迭代所有产品项并检查ID是否匹配,然后只添加该特定项:

addToCart(id){
    if(Meteor.userId()){
        this.state.productsList.forEach(product => {
            if(id == product._id)
                Carts.insert({
                    _id:product._id,
                    itemName: product.itemName,
                    itemDesc:product.itemDesc,
                    uploadedAt:new Date().getTime(),
                    price:product.price,
                    addedBy:Meteor.userId()
                });
        });
    }else{
        console.log('Please login to add this product');
    }
}