javascript - React 中复杂状态的深度合并

Question

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

  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() 将其参数合并到现有状态。为什么它在这里不起作用，这不应该是循环合并吗？

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

Answer 1

setState执行浅合并。如果元数据是扁平的:

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

或者如果使用传播:

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