React中复杂状态的深度合并 [英] Deep merge of complex state in React

问题描述

当我声明了以下初始状态时：

When I have the following initial state declared:

  getInitialState: function() {
    return {
      isValid: false,
      metaData: {
        age: 12,
        content_type: 'short_url'
      }
    };
  },

我用 setState 像这样：

...
let newMetaData = {  age: 20 };
...
this.setState({
        isValid: true,
        metaData: newMetaData
      });
...

结果 this.state.metadata 对象仅定义了年龄。但据我所知， this.setState（）将其参数合并到现有状态。为什么它不能在这里工作，这不应该是经常合并吗？

Resulting this.state.metadata object has only age defined. But as far as I'm aware, this.setState() merges it argument to existing state. Why it's not working here, isn't this supposed to be recurrent merging?

有没有办法在React /中将新对象属性合并到状态对象属性ES6？

推荐答案

setState 执行浅合并。如果metaData是平的：

setState performs a shallow merge. If metaData is is flat:

this.setState({
  metaData: Object.assign({}, this.state.metaData, newMetaData),
});

或使用点差：

this.setState({
  metaData: { ...this.state.metaData, ...newMetaData },
});

这篇关于React中复杂状态的深度合并的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！