Question

这是我的NotificationsUnit组件中的一段代码：

tem;
notificationsType;
constructor(props)   {
    super(props);
    this.state = {notificationsType:''};
}


render() {
    this.setState({tem: 'btn btn-'});
    return(
        <div>
            <button className='btn btn-info'>
                    onClick={this.createNotification('info')}>Info
            </button>
            <hr/>
        </div>
    );
}

但这给了我一个错误，说已超过最大更新深度。当组件重复调用componentWillUpdate或componentDidUpdate内部的setState时，可能会发生这种情况。 React限制了嵌套更新的数量，以防止无限循环。

这很简单：

我该如何解决？

Answer 1

您可以将函数传递给点击处理程序，而不是直接调用此方法。请记住，状态永远不要直接改变this.state =，而应使用this.setState()

进行更改

class NotificationsUnit extends Component {
    state = {
        notificationsType: '',
        tem: 'btn btn-'
    }

    render() {
        const {notificationsType} = this.props
        return (
            <div>
                <button className={'btn btn-' + notificationsType}>
                    onClick={e => this.createNotification('info')}>{notificationsType}
                </button>
                <hr/>
            </div>
        );
    }
}

用法示例：

<NotificationsUnit notificationsType="info"/>

结果：

<div>
   <button class='btn btn-info'>info</button>
</div>

Answer 2

切勿在{{1}}函数中调用setState，

render

render(){ this.setState({tem: 'btn btn-'}); return( ... ) }导致组件的重新渲染，如果将setState放置在渲染中，它将在每次重新渲染时执行，并且始终会出现错误

已超过最大更新深度。当组件重复调用componentWillUpdate或componentDidUpdate内部的setState时，可能会发生这种情况。 React限制了嵌套更新的数量，以防止无限循环。

相反，您可以使用setState进行检查，

componentDidMount

Answer 3

问题在于您正在this.setState方法内调用render：

render() {
  this.setState({ tem: 'btn btn-' })
  // ...
}

这将导致您的组件无限地重新渲染。

您应该从不致电this.setState内部的render。相反，如果您需要基于某个事件来更新状态，请在组件内部创建另一个方法并在那里进行处理。

class NotificationsUnit extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      notificationsType: '',
      tem: 'btn btn-'
    }
  }

  handleSomeEvent = (e) => {
    this.setState({ tem: 'btn btn-' + whatever })
  }

  render() {
    return (
      <div>
        ...
      </div>
    )
  }
}

此外，我在您的按钮的onClick处理程序中看到的一件事：

<button 
  className="btn btn-info"
  onClick={this.createNotification('info')}
>
  Info
</button>

这将最终甚至不单击按钮来调用this.createNotification。相反，您可能想做的是：

<button 
  className="btn btn-info"
  onClick={() => this.createNotification('info')}
>
  Info
</button>

这样，您正在创建一个函数，该函数将在触发onClick处理程序时被调用，然后调用this.createNotification('info')处理程序，从而产生正确的行为。

react.js超过最大更新深度

3 个答案: