Javascript 如何在不刷新页面的情况下更新购物篮中的产品数量？

我与React&Redux合作，并尝试实现一个篮子（这是一个测试项目）。我得到了一个包含如下产品的阵列：

 products: [
        {
            name: "Product one",
            count: 1,
            price: 100,
        },
        {
            name: "Product two",
            count: 1,
            price: 200,
        },
    ]

我在篮子里画了地图。有机会增加产品数量，并根据您选择的商品数量显示总数量。 例如，2个单位的产品价格为100美元，在这一方，总共将有200美元。 但由于我使用LocalStorage，因此只有在刷新页面后，存储量才会发生变化。 如何修复此错误？ 如果需要更详细的信息，请告知

水桶

            <div className="bucket">
                    {this.props.products.map((value,index)=>{
                        return(
                            <div className="product">
                                <h3>{value.price}</h3>
                                <div className="count">
                                    <input type="number" value={value.count} onChange={this.props.handleChange}/>
                                    <button onClick={()=>this.props.increase(value,this.props.products)}>+</button>
                                </div>
                                <h3>{value.price*value.count}</h3>
                            </div>
                        )
                    })}
            </div>
function mapStateToProps(state){
    return{
        products: state.Stack.products,
    }
}

function mapDispatchToProps(dispatch){
    return{
        handleChange: (value)=>dispatch(handleChange(value)),
        increase: (product,products)=>dispatch(increase(product,products)),
    }
}

减速器

const initialState ={
 products: [
        {
            name: "Product one",
            count: 1,
            price: 100,
        },
        {
            name: "Product two",
            count: 1,
            price: 200,
        },
    ]
}

export default function (state = initialState, action){
    switch(action.type){
        case HANDLE_CHANGE:
            return{
                ...state, value: action.value.target.value
            }
        case NEW_PRODUCTS:
            return{
                ...state, products: action.products
            }
        default:
            return state
    }
}

---

谢谢大家!

当您创建一个新产品时，我认为如果您将其附加到现有的产品阵列中会更好

而不是像这样

        case NEW_PRODUCTS:
            return{
                ...state, products: action.products
            }

你试试怎么样

        case NEW_PRODUCTS:
            return{
                ...state, products: [...state.products, action.products]
            }

如果

action.products

是一个包含多个产品的数组，请确保使用spread操作符来确保分别推送每个产品

在这种情况下，

products:[…state.products，action.products]

将更改为

products:[…state.products，…action.products]

---

如果这回答了您的问题，请告诉我。

您是将购物车作为正常状态存储在React/Redux中，还是仅使用LocalStorage？它应该在每次状态改变时更新，在reducer中我有一个阵列产品。我更新了描述，您可以查看。当改变桶中产品的计数时，我重写了一个数组products。

        case NEW_PRODUCTS:
            return{
                ...state, products: [...state.products, action.products]
            }