Question

这是在反应和es2015，我没有把导入和调用到不同的.js文件，但如果你读它通过他们互相调用。

所以我想改变一个键上的状态，其值是一个空对象。我试过了，它工作正常。现在我需要将另一个对象与状态中的空对象合并。我需要从函数中的循环中调用的函数来做，这是从map函数调用的。我得到了最后一个函数的正确对象，但是当我尝试将每个键值集添加到状态中的对象时，只有一个设置，我预期三个。我会尝试用一些代码来澄清。我正在尝试简化代码，所以如果我遗漏任何重要的信息，请告诉我。（对不起名字）

下面的所有内容都是在点击

上触发的

//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);
}

据我所知，这部分工作正常

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});
}

这似乎也给了我想要的结果，但随后又出现了棘手的部分。我想要这样的东西：

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

我读到某处我可能会改变状态，这就是我尝试过不可变的原因。我记不清楚我之前尝试过的是什么，所以我不会混淆写一个不好的例子。

最后两个console.logs给我这个输出，1。点击

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

这是第二次点击

{{1}}

所以我用正确的键和正确的值接收正确的对象，但我把它们合并错了 - 至少这就是我的想法。

我想知道，为什么会发生这种情况，以及我可能如何重写它？

Answer 1

setState有时是异步的（有点），所以在循环中运行一堆并不会让你在每次迭代时操作最近的值。因为当您调用this.setState时，this.state不会立即更新。幸运的是setState有另一个签名来处理这个案子。

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

基本上传递一个函数意味着每个函数将被递增地调用（可能更晚），但是为了使你循环的每次迭代都与上一次迭代的sstate一起使用

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

1 个答案: