Question

我收到了

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

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

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

由于您正在设置state，这将再次调用componentWillUpdate，因此这种递归调用是堆栈超出的原因。

与componentWillMount()不同，我们不应在this.setState()中调用componentWillUpdate()。我们不调用this.setState()的原因是该方法会触发另一个componentWillUpdate()。如果我们在componentWillUpdate()中触发状态更改，我们将以无限循环结束。

Answer 2

this.state尚未在componentWillUpdate中发生变异。

作为重新使用，使用nextState代替this.state来验证使用this.setState后的值是否正常：

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

根据React componentWillUpdate docs：

请注意，您无法在此处调用this.setState（）;你也不应该这样做其他任何东西（例如调度Redux动作）都会触发在componentWillUpdate（）返回之前更新到React组件。如果你需要更新状态以响应道具的变化，使用而不是componentWillReceiveProps（）。

您应该将代码移至componentWillReceiveProps方法。

未捕获的RangeError：React中超出了最大调用堆栈大小

3 个答案: