使用spread运算符更新对象的多个属性

Question

我在reducer中有一个状态如下:

// The current source/selection
const selection = {
  timespan: "-3660",
  customTimespan: false,
  pathIds: [''],
  source: undefined,
  direction: 0,
  appClassIds: []
};

我现在想要的是更新多个属性(timespan和customTimeSpan),类似这样(但这不起作用):

{ ...state, 
  {
      timespan: action.timespan.value,
      customTimespan: action.timespan.value
  } 
};

如何更新状态的多个属性？

Answer 1

您需要从那里删除额外的对象闭包

{ ...state, 
 timespan: action.timespan.value, 
 customTimespan: action.timespan.value
}

应该工作正常

如果你想在vanilla JS中做到这一点,你可以这样做:

Object.assign({}, state, { timespan: action.timespan.value, customTimespan: action.timespan.value})

我认为传播操作员更清洁,如果你有权访问它,应该走这条路.

Answer 2

您还可以使用扩展运算符实现相同的目的，该运算符允许您在对象中拥有新值，而不必对其进行硬编码：

const selection = {
  timespan: "-3660",
  customTimespan: false,
  pathIds: [""],
  source: undefined,
  direction: 0,
  appClassIds: []
};

const newSelectionValues = {
  timespan: "-3600",
  customTimespan: true
};

const newSelection = { ...selection, ...newSelectionValues };