Merging state with object from loop react

Question

This is in react and es2015 and I haven't put the import and call to the different .js files, but if you read it through they are calling each other fine.

So I want to change the state on a key, whos value is an empty object. I have tried that and it works fine. Now I need to merge another object with empty object in state. That I need to do from a function being called from a loop in a function, that's being called from a map-function. I get the proper object to the last function, but when I try to add every key-value set to the object in state, there only comes one set out, where I expected three. I will try to clarify with some code. I am trying to simplify the code, so If I am missing anything vital let me know. (sorry for the names)

Everything underneath is triggered onClick

//item.js
[...]
let title = this.props.title;

someArrayWithObjs.map(function(item, key) {
  checkProcess(title);
})

This parts works fine as far as I can tell

//yet.js
[...]
constructor(props) {
 super(props);
 this.state = {vitalObj: {}}
}

checkProcess(title) {
let importantObj = {};

for (let value in needValue) {
  if (needValue[value] <= presentLvl[value]) {
    importantObj[title] = true;
  } else {
    importantObj[title] = false;
    return makeRenderObj(importantObj);
  };
 }
return makeRenderObj(importantObj);
}

This also seems to give me the result I want, but then tricky parts come. I want something like:

makeRenderObj(importantObj) {
 let vitalObj = this.state.vitalObj;

  console.log(importantObj);
 let together = React.addons.update(importantObj, {$merge: vitalObj});
  console.log(together);

this.setState({vitalObj: together});
}

I read somewhere I might be mutating state, that's why I have tried immutable. I can't remember precise what I tried before, so I won't confuse with writing a bad example.

The last two console.logs give me this output, 1. click

 {key1: correctValue} //good
 {key1: correctValue} //good
 {key2: correctValue} //good
 {key2: correctValue} //why not key1 as well?
 {key3: correctValue} // good
 {key3: correctValue} //and again ??

And this on the second click

 {key1: correctValue} //good
 {key3: correctValue, key1: correctValue} //??
 {key2: correctValue} //good
 {key3: correctValue, key2: correctValue} //??
 {key3: correctValue} // good
 {key3: correctValue} //??

So I am receiving the proper objects with the right keys and the right values, but I am merging them wrong - at least that's what I think.

I would like to know, why this is happening, and possibly how I can rewrite it?

Why is this happening? And if anybody have a solution I would appreciate it as well — Mr Matten
– Mr Matten, Commented Jan 26, 2016 at 13:10

monastic-panic · Accepted Answer · 2016-01-26 13:57:51Z

1

setState is sometimes asynchronous (sort of), so running a bunch in a loop isn't going to let you operate on the most recent value with each iterations. Because this.state isn't immediately updated when you call this.setState. Luckily setState has another signature for dealing with this case.

setState((incrementalState)=> {
  let vitalObj = incrementalState.vitalObj;
  let together = React.addons.update(importantObj, {$merge: vitalObj});
  return { vitalObj: together }
})

Essentially passing a function means that each function will be called incrementally (maybe later) but in order so each iteration of you loop is working with the sstate from the last iteration

answered Jan 26, 2016 at 13:57

monastic-panic

3,9971 gold badge24 silver badges20 bronze badges

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

2 Comments

Mr Matten Over a year ago

Great solution, I had no idea it was a bit asynchronous! I have hit another problem now though. It stops passing the correct information to together. The first click it handles as it's supposed to do, but on the second one, it stays the same

Mr Matten Over a year ago

Nevermind I fixed it using Object.assign instead of .update. Thanks a lot for your help, I have used a long time trying to fix that problem!

Collectives™ on Stack Overflow

Merging state with object from loop react

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related