我如何链接状态更新？

Question

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

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

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

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

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

编辑为了后代，我的解决方案，感谢尤里：

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

我如何链接状态更新？

How do I chain state updates?

reactjs