reactjs - 我如何链接状态更新？

Question

我有一个包含多个控件的表单，可以将所有内容保存到一个变量中。每个控件都有一个 onChanged 函数，它使用该控件的新值运行状态更新:

function onChangedValUpdate(newVal){
  let fields = clone(this.state.fields);
  fields[controlId] = newVal;
  this.setState({fields});
}

我的控件是动态创建的，当它们创建时，它们会在初始值上运行 onChangedValUpdate(如果存在)。问题是，有时会同时创建很多控件，并且 React 会在每次更新时使用相同的克隆 fields 对象将其 setState 排队。对象在 setState 之间没有更新，大概是出于与 this question. 类似的原因。这意味着，实际上，除了一个控件之外的所有更新都被覆盖。

我尝试编写一个过于智能的例程，该例程使用 setState 的回调仅在没有正在进行的回调时运行它，并记住对 字段进行的更改 介于 setState 之间的变量，但 React 会同时运行我所有排队的更新。不管怎样，这个例程感觉太做作了，不太正确。

我确定这是一个微不足道且已解决的问题，但我似乎无法以 Google 可用的方式表述我的问题。我如何链接并发发生的状态更新，并且其中可能有任何数量？

编辑 对于后代，我的解决方案，感谢 Yuri:

function onChangedValUpdate(newVal){
  this.setState( state => {
    let fields = clone(state.fields);
    fields[controlId] = newVal;
    return {fields};
  }
}

Answer 1

您可以将突变函数传递给 setState。这将防止覆盖批量更新，因为每个回调都会获得最近的先前状态。

function onChangedValUpdate(newVal){
  this.setState(function(state){
    const fields = clone(state.fields)

    fields[controlId] = newVal

    return {fields: fields}
  });
}

或者使用对象扩展和增强的对象字面量。

function onChangedValUpdate(newVal){
  this.setState(({fields}) => ({fields: {...fields, [controlId]: newVal}}));
}