Question

在我的应用程序中，我使用React setState的回调在渲染后设置新状态。当我将React升级到16.4.2时，由于setState出现了Maximum update depth exceeded。

setState回调（第二个参数）现在在之后立即触发 componentDidMount / componentDidUpdate而不是所有组件之后已经渲染。

使用：

someHandler() {
    this.setState({prop1: true}, () => {
        this.setState({prop1: false});
    });
},

如何在有效的React 16 api中替换该用法，以设置渲染调用后的状态？

Answer 1

您的意图还不清楚，但是我想您会受益于React Lifecycle Methods

如果目标是在第一次渲染后设置新状态：

componentDidMount() {
  this.setState({prop1:false});
}

如果目标是在每个渲染之后设置新状态：

componentDidUpdate() {
  this.setState({prop1:false});
}

注意：
setState将导致更新，因此您将再次遇到Maximum update depth exceeded，因为该方法会自行调用。为防止这种情况，componentDidUpdate可以使用参数componentDidUpdate(prevState, prevProps)来防止无限循环。
这样您的代码可能看起来像这样。

componentDidUpdate(prevState) {
  if (prevState.prop1 !== this.state.prop1) {
     this.setState({prop1:false});
  }
}

Answer 2

这是由于 无限循环 而发生的。您必须从render内部的某个地方调用someHandler。 Somehandler设置状态会触发重新渲染，并在重新渲染时再次调用somehandler。因此，无限循环。尝试从 Lifecycle钩子内部的某个地方调用某个处理程序，例如ComponentDidMount（或者在功能/无状态组件为useEffect(()=>{body},[]))

的情况下）

React 16 setState回调导致超出最大更新深度

2 个答案:

如果目标是在第一次渲染后设置新状态：

如果目标是在每个渲染之后设置新状态：