超过最大更新深度。当组件在 componentWillUpdate 中重复调用 setState 时，可能会发生这种情况

Posted 2023-02-19

【中文标题】超过最大更新深度。当组件在 componentWillUpdate 中重复调用 setState 时，可能会发生这种情况

【英文标题】：Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate

【发布时间】：2020-12-11 01:22:37

【问题描述】：

我试图在 ReactJS 中切换组件的状态，但我收到一条错误消息：

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

我的代码中没有看到无限循环，有人可以帮忙吗？

ReactJS 组件代码：

import React from 'react' 
    
import Buttonevent from './buttonevent.js'
    
class Button extends React.Component 
  constructor (props) 
    super(props);
    this.state = counter: 0;
  
    
  clickHandler()     
    this.setState(
      counter: this.state.counter+1
    , function () 
      console.log (" Job done");
    );  
  
  
  render() 
    return(   
      <div classname="app">  
        <div classname="click-count">
          Button presses: this.state.count
        </div>
    
        <button onClick= this.clickHandler.bind(this)> Add one</button>
    
        <Buttonevent></Buttonevent>
    
      </div>
    );
  

export default Button;

import React,  Component  from 'react';
    
class Buttonevent extends React.Component 
  constructor() 
    super();
    this.state =  buttontext: "Click me Please";
    this.handleClick = this.handleClick.bind(this);
  
    
  handleClick() 
    this.setState(() => 
      return  buttontext: "Thanks, Button has been clicked !"
    );
  
        
  render() 
    const buttontext = this.state
    return <button onClick =this.handleClick() > buttontext </button>    
  

export default Buttonevent; 

【参考方案1】：

下面这行代码是你的问题

return <button onClick =this.handleClick() > buttontext </button>

由于 this.handleClick() 函数被调用，而不是它应该如下所示

return <button onClick =this.handleClick > buttontext </button>

【讨论】：

感谢您解决问题。你能检查一下按钮类有什么问题吗？我没有得到计数器输出

@Sasikumar S 渲染中的变量名不正确。代替：按钮按下：this.state.count 使用：按钮按下：this.state.计数器