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

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

我使用的是

setState（）

，我知道它通常是

异步的

，因此更改不会立即反映出来。当物品及其数量发生变化时，是否有一种解决方法来获取购物车的总数量

到目前为止，我的代码是：

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

---

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

---

在handleChange中，您可以直接更新数量和总数。您不必在回拨中更新总金额。这将确保数量数组和总数一起更新

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

---

在handleChange中，您可以直接更新数量和总数。您不必在回拨中更新总金额。这将确保数量数组和总数一起更新

你能这样试试吗

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

---

您可能需要保留一系列类似于此的物品及其价格。这样，您就可以更新更改本身的总价了。

您可以这样尝试吗

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

---

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

总价取决于某些属性，如交货、包装等。价格将根据用户的选择反映出来。因此，我需要有一个单独的状态来反映这一点，在这种情况下，当您更改数量时，您的总计将更改两倍，而当您更改包装和交付时，总计将更改两倍，因此会触发两个事件。或者像Expedia这样的大多数旅行网站是如何预先计算包装和交付的标准值的，而不是在回拨中更改手柄。总金额取决于某些属性，如交付、包装等。价格将根据用户的选择来反映。因此，我需要有一个单独的状态来反映这一点，在这种情况下，当您更改数量时，您的总计将更改两倍，而当您更改包装和交付时，总计将更改两倍，因此会触发两个事件。或者像Expedia这样的大多数trip网站是如何在句柄更改中预先计算这些标准值的，而不是在回调中。到目前为止，您使用箭头运算符使setState同步，这意味着其中的代码只有在setState（）结束后才会执行。但是我还不清楚callbackSo far中的内容，您使用arrow操作符使setState同步，这意味着其中的代码只有在setState（）结束后才会执行。但我还不清楚回调中的内容这不能确保两者同时发生。是的，但一旦项目添加到状态中，总数也会发生变化。还有什么可以代替setState进行实时计算的吗？这不能确保两者同时发生。是的，但是，一旦项目添加到状态中，总数也会发生变化。是否有其他东西可以代替setState进行实时计算？