Question

我正在尝试使用redux创建一个在线商店。我已经得到它，以便一个人可以添加一个项目到他们的篮子。但是，添加数量有困难。我的方法有效，不会让某人添加两次相同的产品，我现在只需要增加相同产品的数量。

我的篮子状态存储为一个对象数组。

这是我的篮子减速器：

const initialState = [];

const isProductInBasket = (state, action) => {
  for (var i=0; i < state.length; i++){
    if(state[i].product.id == action.data.product.id){
      return true;
    }
  }
}

export default (state = initialState, action) => {
  switch(action.type) {
    case "ADD_TO_BASKET":
      if (isProductInBasket(state, action)) {
        for (var i=0; i < state.length; i++){
          if(state[i].product.id = action.data.product.id){
            console.log(state, 'stst');
            const basketState = state[i].product.quantity + 1;
            return {...state, basketState}; //problem is here
          }
        }
      }
      else {
        const basketState = [].concat(state).concat(action.data)
        return basketState;
        break;
      }
    default:
        return state
  };
};

显然我正在做什么是错误的，因为我正在返回一个对象，但我想知道我如何能够返回该新对象来代替旧对象。我需要将其作为对象返回但在数组中...

当我拥有这个时，我会非常清楚：

{name: "Rucksack", price: "15.00", id: 1, quantity: 0}

然后我点击添加到购物篮，然后应该返回：

{name: "Rucksack", price: "15.00", id: 1, quantity: 1}

Answer 1

我建议阅读Redux文档的this section - 它会向您展示如何在没有变异的情况下更新数组中的单个元素。

实际上，您需要做的是创建一个具有修改后的篮子项目副本的新数组。当您需要在不变异的情况下对阵列执行转换时，Array.prototype.map是您的朋友：

if (isProductInBasket(state, action)) {
    return state.map(product => {
        if (product.id == action.data.product.id) {
            return { ...product, quantity: product.quantity + 1 };
        }
        return product;
    });
}

Answer 2

您可以使用findIndex检查对象是否已存在并更新它，否则将有效负载数据推入状态

switch(action.type) {
    case "ADD_TO_BASKET":
      const index = state.findIndex(productData => productData.product.id === action.data.product.id);
     if(index > -1) {
        return [
            ...state.slice(0, index),
            {
                ...state[index],
                product: {
                    ...state.product,
                    quantity: state[index].product.quantity + 1
                }
            },
            ...state.slice(index + 1)
        ]
     } 
     return [...state, action.data]

如何替换redux中的对象属性值

2 个答案: