Question

我的减速机有一个奇怪的问题。它返回一个对象而不是数组。我该如何解决这个问题？

export function reducer(state = {cart: []}, action) {
  switch (action.type) {
    case "ADD_TO_CART": {
      let oldState = [...state.cart]


      let index = oldState.findIndex(x => x.name === action.payload.name)


      return index > -1 ? {...state, cart: oldState} : {...state, cart: Object.assign({}, action.payload, {quantity: action.payload + 1 })} 


    }
    default: {
      return {
        ...state
      }
    }
  }
}

编辑：为了澄清我试图将动作有效负载添加到购物车数组中，如果它不存在并增加数量，然后只是增加数量，如果它已经在购物车数组中退出。状态应该是一个对象，而购物车应该是一个数组。当我期待一个数组时，购物车似乎会返回一个对象。

P.S。我对ES6很危险......

Answer 1

您的代码存在问题：

{...state, cart: Object.assign({}, action.payload, {quantity: action.payload + 1 })}

这相当于这段程序代码：

const newCart =
  Object.assign({}, action.payload, {quantity: action.payload + 1 }

Object.assign({}, state, { cart: newCart });

Object.assign接受任意数量的参数，只要它们都是对象，然后从右到左合并它们的属性。

您希望返回的对象中的属性cart是一个数组，而您正在清除为其分配对象。

Answer 2

这里似乎有问题：

cart: Object.assign({}, action.payload, {quantity: action.payload + 1 })}

我建议它应该是这样的：

cart: [...oldState, Object.assign({}, action.payload, {quantity: action.payload + 1 })]

但这部分Object.assign({}, action.payload, {quantity: action.payload + 1 }真的令人不安。您使用action.payload作为对象，紧随其后 - action.payload + 1作为数字。

如果你想增加quantity - 那么

if (index > -1) {
  oldState[index] = {...oldState[index], quantity: oldState[index].quantity + 1};
  return {...state, cart: oldState};
} else {
  oldState.push({...action.payload, quantity: 0});
  return {...state, cart: oldState};
}

Reducer返回对象而不是数组

2 个答案: