使用 Object.assign 更新嵌套对象

IT技术 javascript reactjs ecmascript-6 redux react-redux
2021-05-25 22:57:41

我有以下对象。当用户单击按钮时，该对象会被分配一个新值。

state = {
  title: '',
  id: '',
  imageId: '',
  boarding: {
    id: '',
    test: '',
    work: {
      title: '',
      id: ''
    }
  }
}

我更新的对象看起来像：

state = {
  title: 'My img',
  id: '1234',
  imageId: '5678-232e',
  boarding: {
    id: '0980-erf2',
    title: 'hey there',
    work: {
      title: 'my work title',
      id: '456-rt3'
    }
  }
}

现在我只想更新状态内的工作对象并保持一切不变。我Object.assign()在对象未嵌套但对嵌套感到困惑时使用。

Object.assign({}, state, { work: action.work });

我的 action.work 拥有整个工作对象，但现在我想将其设置为登机，但这会取代登机中的所有内容，这不是我想要的。

4个回答

您应该手动合并深层对象属性，请尝试以下操作：

Object.assign({}, state, { 
  boarding: Object.assign({}, state.boarding, {
    work: action.work
  }
});

或使用扩展运算符

{
  ...state,
  boarding: {
    ...state.boarding,
    work: action.work
  }
}

如果不能按照@dhilt 的建议手动合并它们，请查看lodash 的merge.

mergeWith如果您想自定义合并行为，您可以使用，例如合并数组而不是覆盖。

您可以使用 Object.assign 更新嵌套对象，例如：

Object.assign(state.boarding, { work: action.work })

这将使用新的工作属性更新状态。

如果您只想更新work，则不需要任何类型的合并。做就是了

state.boarding.work = action.work;

你所关注的永恒性，可以使副本state，然后更新work。

其它你可能感兴趣的问题
上一篇如何只为第一层生成gcode？ 下一篇Solidworks：将装配体保存为 STL 时的重合或干涉几何体