反应原生添加到购物车数量和总价问题

时间:2018-08-22 13:17:21

标签: javascript reactjs react-native redux react-redux

遇到一个问题,即我的购物车在2个数量后不能正确更新数量和总价。

在按下按钮的ADD_TO_CART期间使用redux动作,我将向数量为1的对象分配一个新元素

export function addToCart(card){
    return (dispatch) => {
        card.quantity = 1;
        dispatch({type: ADD_TO_CART, data:card});
        console.log(card);
    };
}

在我的减速器上,这是函数

let cartState = { data: [], totalPrice: 0 };
const cartReducer = (state = cartState, action) => {
            switch (action.type) {
                case ADD_TO_CART:
                let totalPriceCart = 0;
                let checkforDuplicate = state.data.some(function (a){
                    if(a.sno === action.data.sno){
                        return true;
                    }
                });

                if(checkforDuplicate){
                    for (let i in state.data) {
                        if (state.data[i].sno === action.data.sno) {
                            state.data[i].quantity = action.data.quantity+1;
                            break;
                        }
                    }
                    for(let e in state.data){
                        totalPriceCart = totalPriceCart + (state.data[e].price*state.data[e].quantity);
                    }
                    return  {data: state.data, totalPrice: totalPriceCart };
                }

                let cloneArr = state.data.concat(action.data);
                for(let i in cloneArr){
                    totalPriceCart = totalPriceCart+(cloneArr[i].price*cloneArr[i].quantity);
                }

                return {...state, data : cloneArr, totalPrice: totalPriceCart }
                default:
                return state;
            }
        };

在减速器中我正在做什么

  • 如果存在添加到购物车操作对象中的重复项(由sno检测),则不会合并到主状态数组中,而是会更新该状态中现有项的数量
  • 否则,将连接数组

  • 最后,将计算整个状态下的总价格,并将其传递回我的购物车以根据数量*价格显示总价格

问题是,目前,我的代码只显示到2倍,当第三次添加相同商品时,数量将保持2倍,并且价格计算不正确。

1 个答案:

答案 0 :(得分:-1)

you should mutate quantity of the state.data

if (checkforDuplicate) {

    for (let i in state.data) {
        if (state.data[i].sno === action.data.sno) {
            state.data[i].quantity = state.data.quantity + 1;
            break;
        }
    }
    for (let e in state.data) {
        totalPriceCart = totalPriceCart + (state.data[e].price * state.data[e].quantity);
    }
    return { data: state.data, totalPrice: totalPriceCart };
}

mutate using ==== Array.map()=======

    let mutatedArr = state.data.map((item)=> {
        if (item.sno === action.data.sno) {
            item.quantity += 1;
        }
       return item;
    });
let totalPriceCart = 0;
 mutatedArr.forEach((item)=>{
totalPriceCart+ =  (item.price * item.quantity)
    })
    return { data: mutatedArr, totalPrice: totalPriceCart };