未捕获的游侠错误：在 React 中超出最大调用堆栈大小

Question

我已经收到了

错误：“未捕获的RangeError：超出最大调用堆栈大小”

我怀疑我的组件WillUpdate方法中的这个代码块是原因，因为我只是在添加代码后才收到错误。我在这里做错了什么吗？

componentWillUpdate(nextProps, nextState) {

...

if (nextProps.show) {
  for (var i = 0; i < this.props.data.actions.length; i++) {
    if (this.props.data.actions[i].assignedTo !== this.state.userId && this.state.showActions === true) {
      this.setState({ showActions: false })
    }
    if (this.props.data.actions[i].assignedTo === this.state.userId && this.state.showActions === false) {
      this.setState({ showActions: true })
    }
  }
 }

...

}

当单击一个按钮时，nextProps.show被设置为true，然后它检查被分配一个动作的人是否与登录的用户相同，然后它将showActions状态设置为true。如果满足代码中的条件，此状态用于显示/隐藏行

Answer 1

根据React组件WillUpdate文档：

请注意，您不能在这里调用this.setState（）；也不应该在组件WillUpdate（）返回之前执行任何其他操作（例如分派Redux操作）来触发对React组件的更新。如果您需要更新状态以响应道具更改，请改用组件WillReceiveProps（）。

您应该将代码移动到< code > componentWillReceiveProps 方法中。

Answer 2

此状态尚未在组件更新中发生突变。

作为重用，在使用< code>this.setState后，使用< code>nextState而不是< code>this.state来验证值是否正确:

componentWillUpdate(nextProps, nextState) {

...

if (nextProps.show) {
  for (var i = 0; i < this.props.data.actions.length; i++) {
    if (this.props.data.actions[i].assignedTo !== this.state.userId && nextState.showActions === true) {
      this.setState({ showActions: false })
    }
    if (this.props.data.actions[i].assignedTo === this.state.userId && nextState.showActions === false) {
      this.setState({ showActions: true })
    }
  }
 }

...

}

Answer 3

由于您正在设置状态，这将再次调用组件WillUpdate，因此此递归调用是堆栈超出的原因。

与组件WillMount（）不同，我们不应该在组件WillUpdate（）中调用this.setState（）。我们不调用this.setState（）的原因是该方法触发了另一个组件WillUpdate（）。如果我们在组件WillUpdate（）中触发状态更改，我们将最终陷入无限循环。