Question

当用户向购物车添加各种商品和数量时，我需要实时更新总计。

我正在使用setState()，我知道它通常是asynchronous，因此更改不会立即反映出来。当物品及其数量发生变化时，是否有解决方法来获得购物车的总计？

到目前为止我的代码：

handleChange(event){
        const itemPrice= [2.63, 33.44, 9.99]; // item-price in order Salmon, Apple, Papaya


        const val = event.target.value;
        this.setState({
            [event.target.name]: val,

        }, () => {
            if(this.state.item == 1) { // Salmon
             this.state({
                total : itemPrice[val -1]
             });
            } else if (this.state.item == 2) { // Apple
               this.state({
                total : itemPrice[val -1]
               });

            }
        });
        console.log(this.state);
    }

Answer 1

请你这样试试。

handleChange(event) {
const itemDetails = [{
    name: 'salmon',
    price: 2.63
}, {
    name: 'apple',
    price: 33.44
}, {
    name: 'papaya',
    price: 9.99
}]; // item listing
const val = event.target.value;
let itemPrice = itemDetails.forEach((item) => {
    if (item.name === 'apple')
        return item.price;
})
this.setState({
    [event.target.name]: val,
    total: total + itemPrice //Add whatever prices you need
});
    console.log('total change: ' +this.state);
}

您可能需要使用它的价格保留这样的项目数组。通过这种方式，您可以更新变更本身的总价格

Answer 2

我假设你的州有一个大小等于物品价格骰子的数组（理想情况下应该是道具）。还有另一个状态变量即总量。

在handleChange中，您可以直接更新数量和总数。您无需更新回叫中的总金额。这将确保数量数组和总数将一起更新。

使用setState实时更新购物车项目

2 个答案: