增加对象数组re​​dux的值

Question

如果状态数组中已经存在商品，我需要增加购物车中商品的数量。在减速器中，我让它工作，但它需要是不可变的。因此，我的组件没有正确更新。

这是我的减速器的代码：

import { ADD_TO_CART, REMOVE_FROM_CART } from '../actions/types';

const initialState = [];

//Cannot mutate array in reducer 

export default function(state = initialState, action){
    const { type, payload } = action;

    switch(type){
        case ADD_TO_CART:
            const newState = [...state]
            for(var i = 0; i < newState.length; i++){
                if(newState[i].item.uid === payload.item.uid){
                    newState[i].item.qty ++;
                    return [...newState];
                }
            }
            return [...state, payload];
        case REMOVE_FROM_CART:
            for(var j = 0; j < state.length; j++){
                    if(state[j].item.uid === payload.uid){
                        state[j].item.qty = 1;
                    }
            }
            return state.filter(cartItem => cartItem.item.uid !== payload.uid);

        default:
            return state;
    }
}

如果 item 已经在数组中，我需要增加 qty。

Answer 1

我看到的问题是newState[i].item.qty++;，尽管您浅层地复制了数组，但数组中的元素仍然代表先前状态的元素，因此增加它会改变对象。

要解决此问题，您还应该将每个项目复制到一个新对象中，然后更新 new 对象引用。

以下内容还包括一个小优化，通过检查匹配的项目 ID 因为将数据复制到新数组中，从而迭代数据一次而不是两次。

let itemExists = false;
const newState = state.map(item => {
  const newItem = { ...item };
  if (newItem.item.uid === payload.item.uid) {
    itemExists = true;
    newItem.item.qty = item.qty + 1;
  }
  return newItem;
});

if (!itemExists) newState.push(payload);

return newState;

编辑：替代方法

const itemIndex = state.findIndex(item => item.item.id === payload.item.id);
if (itemIndex !== -1) {
  return state.map((item, i) => ({
    ...item,
    item: {
      ...item.item,
      qty: item.item.qty + (itemIndex === i ? 1 : 0),
    }
  }));
} else {
  return [...state, payload];
}