values overwriting each other in object in setState reactjs

Question

I am trying to pre-populate filter values that I have saved in the redux store when a user navigates back to that page where they set the filters. However, when I am going to set the state, I'm having trouble with the last set value overwriting the existing one. This is how I set the state in the constructor:

this.state = {
  hierarchyTableFilters: {
    hierarchy: null,
    signOffStatus: null,
  },
};

and then this is how I'm going to set the state in the called function with the stored data from redux:

const {userState} = this.props.userInfo;
const previouslySelectedFilter = userState.state.hierarchyTableFilters;

if (previouslySelectedFilter) {
  this.setState({
    hierarchyTableFilters: {
      hierarchy: previouslySelectedFilter.hierarchy,
      signOffStatus: previouslySelectedFilter.signOffStatus,
    },
  });

Whatever state gets set last is the only filter that appears pre-filtered. Is there a way to set state for two different values in an object or do I have to go about this in a different way?

Danny Delott · Accepted Answer · 2017-12-08 19:36:06Z

1

If you need to set local state based on previous local state, you should use the setState callback pattern instead.

this.setState(previousState => ({ ... }))

This is because setState does batch updates. See the docs on setState

answered Dec 8, 2017 at 19:36

Danny Delott

7,0284 gold badges38 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bobby Tables Over a year ago

so how would I update the two values in the hierarchyTableFilters object with their corresponding values in the previouslySelectedFilter object I'm getting from the redux store? The two values technically do not have any existing state on them because I'm setting them as the page has just finished loading

willwoo · Accepted Answer · 2017-12-08 20:25:02Z

1

could you flatten your data structure to take advantage of the setState merging functionality?

this.state = {
   filtersHierarchy: null
   filtersSignOffStatus: null
 };

with the latter piece being:

if (previouslySelectedFilter) {
  const { hierarchy, signOffStatus } = previouslySelectedFilter;
  let newState = {};
  if (hierarchy) newState.filtersHierarchy = hierarchy;
  if (signOffStatus) newState.filtersSignOffStatus = signOffStatus;
  this.setState(newState);
}

answered Dec 8, 2017 at 20:25

willwoo

5603 silver badges9 bronze badges

1 Comment

Bobby Tables Over a year ago

That's actually the direction I started going in once I started running into complications with my original way. Thanks for the insight!

Collectives™ on Stack Overflow

values overwriting each other in object in setState reactjs

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related