时间戳

首页 > 解决方案 > 如何在不刷新页面的情况下更新购物篮中的产品数量？

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

行动

export function increase(product,products){
    return(dispatch)=>{
        products.map((value)=>{
            if(value == product){
                value.count ++;
            }
        })
        dispatch(newProducts(products));
    }
}



export function newProducts(products){
    return{
        type: NEW_PRODUCTS,
        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
    }
}

谢谢！

标签： javascriptreactjsreduxreact-reduxjsx

解决方案

当您创建新产品时，我认为将其附加到现有产品数组中会更好

而不是喜欢

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

你试试怎么样

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

如果action.products是一个包含多个产品的数组，请确保使用扩展运算符来确保您单独推送每个产品

在这种情况下，该行将products: [...state.products, action.products] 更改为products: [...state.products, ...action.products]

请让我知道这是否回答了您的问题。

推荐阅读