Question

const initialState = {
  arr: [
    {
      name: "Chicken",
      grade: "A",
      quantity: 0
    },
    {
      name: "Mutton",
      grade: "B",
      quantity: 0
    },
    {
      name: "Sandwich",
      grade: "A-Plus",
      quantity: 0
    }
  ]
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.ADD_QUANTITY:
      return {
        ...state,
        arr: {
          ...state.arr,
          [state.arr[action.index]]: {
            ...state.arr[action.index],
            [state.arr[action.index][0].quantity]:
              [state.arr[action.index][0].quantity] + 1
          }
        }
      };
    default:
      return state;
  }
};

我正试图不变地更新数量。每次单击按钮时，数量应增加1。以上我写的代码是错误的（因此在此处发布查询）。如果有人能告诉我我出了什么问题并指出正确的方向，我将不胜感激。

我期望的最终输出是：

arr: [
    {
      name: "Chicken",
      grade: "A",
      quantity: 1   // Updated value
    },
    {
      name: "Mutton",
      grade: "B",
      quantity: 0
    },
    {
      name: "Sandwich",
      grade: "A-Plus",
      quantity: 0
    }
  ]

Answer 1

有些事情与您当前的代码不兼容。您的初始状态将arr定义为一个数组，但是您的reducer返回了一个Object。另外，当您尝试访问quantity内对象的arr键时，将使用与数据结构不匹配的附加[0]索引访问器。

我还建议您（使用combineReducers组成化简器，以使您更容易跟踪数据结构。组合化简器使您可以处理数据结构的各个级别，而不必担心整个结构。另外，使用散布运算符对对象效果很好，但是在处理数组时，map之类的函数有时会更清晰。

类似的事情可以满足您的需求：

const arr = (state = initialState.arr, action) => {
    switch (action.type) {
        case actionTypes.ADD_QUANTITY:
            return state.map((element, i) => {
                return i === action.index ? {...element, quantity: element.quantity + 1} : element;
            });
        default:
            return state;
    }
}

const rootReducer = combineReducers({arr});

Redux：不变地更新数组内的对象值

1 个答案: