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

Merging state with object from loop react

本文关键字：对象 合并 循环 状态      更新时间：2023-09-26

这是在 react 和 es2015 中，我没有将导入和调用放入不同的 .js 文件中，但如果您通读它，它们会很好地相互调用。

所以我想改变键的状态，谁的值是一个空对象。我已经试过了，它工作正常。现在我需要合并另一个对象，状态为空的对象。我需要从函数中的循环调用的函数中执行此操作，该函数是从映射函数调用的。我为最后一个函数获取了正确的对象，但是当我尝试将每个键值集添加到状态中的对象时，只有一个集合，我期望三个。我将尝试用一些代码来澄清。我正在尝试简化代码，所以如果我错过了任何重要的东西，请告诉我。（对不起名字）

下面的一切都在点击时触发

//item.js
[...]
let title = this.props.title;
someArrayWithObjs.map(function(item, key) {
  checkProcess(title);
})

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

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

我在某处读到我可能是变异状态，这就是为什么我尝试了不可变。我不记得我以前尝试过的确切内容，所以我不会与写一个糟糕的例子混淆。

最后两个控制台日志给了我这个输出，1.

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

这是在第二次点击

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

所以我收到了具有正确键和正确值的正确对象，但我合并它们错误 - 至少我是这么认为的。

我

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

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

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

本质上，传递一个函数意味着每个函数都将被增量调用（也许稍后），但为了顺序，循环的每次迭代都在使用上次迭代的状态

相关文章：