Question

我有一个React组件，可以维护多个子组件的状态。通过componentDidMount()我在子组件的父组件中调用此函数：

change = (fieldset, field, data) => {
  this.setState({
    [fieldset]: {
      ...this.state[fieldset],
      [field]: data,
    }
  })
}

使用表单/字段集/字段查看使用模式，但使用调用上述函数的字段。

我遇到的问题是，我相信我通过快速连续多次调用此函数来混淆React，因为除了一两项之外的所有项目都没有更新状态。

我已经尝试使用Object.assign()来避免变异状态，但是大部分状态即使在我开始读取当前开始时也没有正确更新。

这是否违反React最佳做法？子组件是否有更好的方法在父组件中调用setState？

Answer 1

由于更新状态的方式取决于状态本身，因此需要使用函数而不是对象。

change = (fieldset, field, data) => {
  this.setState(prevState => ({
    [fieldset]: {
      ...prevState[fieldset],
      [field]: data,
    }
  }))
}

功能将一个接一个地应用。因此，您不会覆盖任何挂起的更改。

来自docs

this.setState({quantity: this.state.quantity + 1})

this.setState({quantity: this.state.quantity + 1})

后续调用将覆盖先前调用中的值   循环，所以数量只会递增一次。如果下一个   state取决于之前的状态，我们建议使用updater   功能形式，而不是。

使用嵌套对象调用setState不会正确更新状态

1 个答案: