Javascript 对象数组的增量值redux

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

这是我的减速器的代码：

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

import{ADD_TO_CART，REMOVE_FROM_CART}来自“../actions/types”；
常量initialState=[]；
//无法在reducer中变异数组
导出默认函数（状态=初始状态，操作）{
const{type，payload}=action；
开关（类型）{
案例添加到购物车：
const newState=[…state]
对于（var i=0；icartItem.item.uid！==payload.uid）；
违约：
返回状态；
}
}

---

如果项目已经在数组中，我需要增加数量

我看到的问题是关于

newState[I].item.qty++，虽然您很肤浅地复制了数组，但数组中的元素仍然表示前一个状态的元素，因此对其进行增量后会使对象发生变化

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

下面还包括一个小优化，通过在将状态复制到新数组时检查匹配项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];
}

几乎可以得到它，但不幸的是，我运行了redux immutable state invariant，它给出了一个错误：在调度中检测到状态突变，路径为：
cart.0.item.qty
。看看处理动作{“type”：“ADD_TO_CART”，“payload”：{“item”：{“name”：“hamburger”，“price”：12，“category”：“晚餐”，“qty”：2，“uid”：“d23ff8-4056-38b6-7e3-41ec8e01871”}。@chrus54321更新了答案，尝试
newItem.qty=item.qty+1这是一种更常见的模式，不应该改变任何旧的引用。如果这不起作用，那么我有另一个想法。@chrus54321好的，我刚才注意到的一件事是您的状态数组元素使用了嵌套的
项
键，因此我的第一个答案可能遗漏了这一点，可能是您的测试发现的突变。我已经对它进行了更新，并添加了我正在考虑的替代方法。