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'
      }
    };
  },

and I update state with setState like this:

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

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?

Is there a way to merge new object properties to state object property in React/ES6?

回答1:

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

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

or if using spread :

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