javascript - 使用 setState 实时更新购物车商品

Question

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

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

到目前为止我的代码:

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);
}

您可能需要保留一系列此类商品及其价格。通过这种方式，您可以更新更改本身的总价