Javascript reactjs上下文缩减器增量数据

如何在对象内增加数组值

我尝试了下面的代码，但它正在删除衣服数组，并将其替换为

shirts:Nan

value

export const initialState = {
    booking: {
       expPrice: 0,
       garments: [
        {
            shirts: 0
        },
        {
            pants: 0
        },
        {
            etc: 0
        }
    ]
},
bookings: []
};

export const bookingsReducer = (state, action) => {
   switch (action.type) {
    case 'INCREMENT_SHIRT': {
        return {
            ...state,
            booking: {
                ...state.garments,
                shirts: state.shirts + 1 // how to increment 
            }
        };
    }
    default:
        return state
   }
}

问题 您正在传播一个未定义的值

state.counts

，该值实际上应该是

state.bookings.counts

，因此

counts

数组不会复制到新状态。类似地，

state.shirts

是未定义的，使用它进行的任何数学运算都会产生一个

NaN

值

解决方案 您应该复制所有嵌套状态对象属性

对于给定状态：

{
  booking: {
    expPrice: 0,
    garments: [
      { shirts: 0 },
      { pants: 0 },
      { etc: 0 }
    ]
  },
  bookings: []
}

还原逻辑

case 'INCREMENT_SHIRT': {
  return {
    ...state,
    booking: {
      ...state.booking,
      garments: state.booking.garments.map((cat, i) => i === 0 ? {
        ...cat,
        shirts: cat.shirts + 1,
      } : cat),
    }
  };
}

---

您正试图将

服装

数组的属性扩展到新的预订对象中，但是，由于

状态

没有服装属性，您将扩展的属性将是未定义的（这是一个无操作）。此外，如果它确实保存了数组，则将数组的索引作为键分散到新对象。您还向预订对象添加了一个

shirt

属性，您不希望这样做，因为您希望将此属性保留在衣服数组的对象中

相反，将

state.booking

属性分散到您的预订对象中，然后使用新数组覆盖衣服属性，使其成为当前衣服数组的映射版本。映射时，如果找到具有

shirts

属性的对象，可以通过将其值添加到当前值来增加其值，否则，可以返回当前对象：

返回{
……国家，
预订：{
…州。预订，
服装：state.booking.contactures.map(
obj=>obj.hasOwnProperty（'shirts'）？{shirts:obj.shirts+1}:obj
) 
}
};

@循环，因为

state.booking.shirts=state.booking.shirts+1

是一种状态变异，在React和常规Redux reducer函数中非常反模式。对。也许我不应该在起床前说什么。