Question

13

this.setState isn't merging states as I would expect

rated 0 times [ 18] [ 5] / answers: 1 / hits: 75810 / 11 Years ago, sat, september 21, 2013, 12:00:00

I have the following state:

this.setState({ selected: { id: 1, name: 'Foobar' } });

Then I update the state:

this.setState({ selected: { name: 'Barfoo' }});

Since setState is suppose to merge I would expect it to be:

{ selected: { id: 1, name: 'Barfoo' } };

But instead it eats the id and the state is:

{ selected: { name: 'Barfoo' } };

Is this expected behavior and what's the solution to update only one property of a nested state object?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dominics

Add To Favorites

Follow

Total Points: 424

Total Questions: 99

Total Answers: 107

Location: South Korea

Member since Fri, Sep 11, 2020

4 Years ago

dominics questions

1 react setState() not triggering re-render

Wed, Apr 6, 22, 00:00, 2 Years ago

1 export a variable inside a function to be used in other modules

Mon, Feb 7, 22, 00:00, 2 Years ago

1 how to make TextInput with dropdown/picker in react-native?

Thu, Jan 13, 22, 00:00, 2 Years ago

1 How to remove extra empty space and scroll bar at the bottom of my html page?

Wed, Jan 20, 21, 00:00, 3 Years ago

1 AgGrid: applyColumnState is not a function

Fri, Sep 18, 20, 00:00, 4 Years ago

View All

answered 11 Years ago gabriellagiselc · Accepted Answer

I think setState() doesn't do recursive merge.

You can use the value of the current state this.state.selected to construct a new state and then call setState() on that:

var newSelected = _.extend({}, this.state.selected);

newSelected.name = 'Barfoo';

this.setState({ selected: newSelected });

I've used function _.extend() function (from underscore.js library) here to prevent modification to the existing selected part of the state by creating a shallow copy of it.

Another solution would be to write setStateRecursively() which does recursive merge on a new state and then calls replaceState() with it:

setStateRecursively: function(stateUpdate, callback) {

  var newState = mergeStateRecursively(this.state, stateUpdate);

  this.replaceState(newState, callback);

}