反应js超过最大更新深度

Question

这是我的通知单元组件中的一段代码：

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>
    );
}

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

这是一个快照:

我该如何解决这个问题？

Answer 1

问题是您在< code>render方法内调用了< code>this.setState:

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

这将导致组件无限次重新渲染。

您永远不应该调用this。render内部的setState。相反，如果需要根据某个事件更新状态，请在组件内创建另一个方法并在那里处理它。

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>

这将结束调用< code > this . create notification ,甚至不需要单击按钮。相反，您可能想做的是:

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

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

Answer 2

永远不要在render函数中调用setState，

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

  return(
    ...
  )
}

setState会导致组件的重新渲染，如果您将setState放在渲染中，它将在每次重新渲染时执行，并且您总是会收到错误

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

相反，您可以使用< code>componentDidMount来检查这一点，

componentDidMount(){
   this.setState({tem: 'btn btn-'});
}

Answer 3

可以将函数传递给 click 处理程序，而不是直接调用此方法。请记住，状态不应该我直接改变这个.状态 =，但应该使用这个.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>