Javascript 在循环中调用SetState时如何合并对象

在我的组件中，我的状态如下所示：

  class MainClass 

  constructor(props) {
    super(props);
    this.state = {
      form: {
        startDate:"1/11/2020", 
        endDate:"5/11/2020", 
        ....
     },
    };
  }

我有一个更新开始和结束日期的函数，还有一个更新表单的函数

  handleFormChanges = targets => {
    targets.forEach(function (target) {
      this.setState({
        form: { ...this.state.form, [target.name]: target.value },
      });     
     });
  };
  

..... 


updateDate(startDate, endDate) {
const newStartDate = {name:"startDate", value:startDate.value}
const newEndDate = {name:"endDate", value:endDate.value}
this.handleFormChanges([newStartDate, newEndDate])
}  

---

所以我意识到在循环中调用setState是一种代码味道，而不是react的工作方式。如何组合目标数组，以便只需调用setState一次？

您可以使用类似的

constnewobj={}；
targets.forEach（函数（目标）{
newObj[target.name]=target.value，
});
this.setState（{…this.state.form，…newObj}）

您可以使用

reduce

一次性累积

目标

编辑：要同时处理单个对象和对象数组，可以将
目标
用方括号括起来
[]
，然后
展开（）

this.setState({
表格：{
…这个.state.form，
…[targets].flat（）.reduce(
（acc，target）=>（{…acc，[target.name]：target.value}），
{}
),
},
})
这绝对是一个错误的想法，因为您可能会丢失一些数据，并导致每次迭代都需要额外的渲染

每个函数使用一次setState的主要思想。另外，您不需要使用handleFormChanges，最好通过键添加值）

有没有办法用handleChange这样的方法来实现这一点，而不是硬编码？看看@hgb123答案）他写道你需要）acc在这个场景中的意思是什么？是指累计吗？@lost9123193是的，是累加器在每次迭代中存储累计值，您可以在“我想使用此解决方案”中看到更多内容，但它似乎删除了此.state中的其他字段。form@lost9123193基本上，这种方法与您的解决方案类似，但是，它不是使用
target.length
time（s）来设置状态，而是将所有
{[target.name]：target.value}
抓取到一个对象中，并销毁代码中存在的错误。这很有效，很有道理，谢谢！

updateDate(startDate, endDate) {

 this.setState({
        form: { 
        ...this.state.form, 
       "startDate": startDate.value,
        endDate: endDate.value
          },
      });    
}