reactjs 上下文减速器增量数据

Question

如何增加 object 中的数组值。

我尝试了下面的代码，但它正在删除服装数组并用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数组的属性传播到您的新预订 object，但是，因为state没有您将传播的服装属性未定义（这是一个无操作）。 此外，如果它确实保存了您的数组，您会将数组的索引作为键传播到您的新 object。 您还在预订 object 中添加了一个shirt属性，您不想这样做，因为您希望将此属性保留在您的服装数组的对象中。

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

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

Answer 2

问题

您正在传播一个未定义的值state.garments实际上应该是state.bookings.garments ，因此garments数组不会复制到新的 state。 同样， state.shirts是未定义的，对其进行的任何数学运算都会产生NaN值。

解决方案

您应该浅复制所有嵌套的 state object 属性。

对于给定的 state：

{
  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),
    }
  };
}