将状态与来自循环反应的对象合并

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?

Answer 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