Question

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

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有整个工作对象，但现在我想把它设置为登机，但是这取代了登机的所有东西，这不是我想要的。

Answer 1

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

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

或使用点差运算符

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

Answer 2

如果手动将它们合并为@dhilt建议不是一个选项，请查看lodash's merge。

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

Answer 3

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

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

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

Answer 4

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

state.boarding.work = action.work;

如果您担心不变性，可以复制state，然后更新work。

Answer 5

我可以看到你正在使用Redux。文档中有一篇关于以不可变方式更新对象的文章。我建议你阅读它：http://redux.js.org/docs/recipes/reducers/ImmutableUpdatePatterns.html

此外，人们通常会使用库，例如Immutable.js或seamless-immutable，这些代码不会使您的代码看起来令人作呕：）

使用Object.assign更新嵌套对象

5 个答案: