javascript - reactjs context reducer增量数据

Question

如何增加对象内的数组值。

我尝试了下面的代码，但它删除了服装数组并将其替换为 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
   }
}

Answer 1

您正在尝试将 garments 数组的属性扩展到您的新预订对象中，但是，由于 state 没有 garments 属性，您将传播 undefined(这是一个空操作)。此外，如果它确实保存了您的数组，您将把数组的索引作为新对象的键进行传播。您还向预订对象添加了 shirt 属性，但您不想这样做，因为您希望将此属性保留在 garments 数组的对象中。

相反，将 state.booking 属性传播到您的预订对象中，然后用一个新数组覆盖服装属性，使其成为您当前服装数组的映射版本。当您映射时，如果您找到一个具有 shirts 属性的对象，您可以通过将当前值加一来增加它的值，否则，您可以返回当前对象:

return {
  ...state,
  booking: {
    ...state.booking,
    garments: state.booking.garments.map(
      obj => obj.hasOwnProperty('shirts') ? {shirts: obj.shirts+1} : obj
    ) 
  }
};