React Error: Maximum update depth exceeded - simple example

Question

我正在尝试使用 master.js 组件中的一些功能。当我运行下面的代码时，我得到了错误 "Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops."

我在孙子组件中添加按钮时出现错误

      <button onClick={props.homeHandler()}>change home</button>

如果我注释掉页面加载的按钮（没有按钮），那么错误与 props.homeHandler()

中调用的函数有关

下面是完整代码

import Child from './child';

class Master extends Component {
  constructor(props) {
    super(props);
    this.state = {
      parentName: 'Parent',
      home: 'Flat'
    };
    this.greetParent = this.greetParent.bind(this);
    this.changeName = this.changeName.bind(this);
    this.changeHome = this.changeHome.bind(this);
  }
  //Event Handlers
  greetParent() {
    console.log(`Hello ${this.state.parentName}`);
  }
  changeName() {
    this.setState({ parentName: 'Paul' });
  }
  changeHome() {
    this.setState({ home: 'semmi detatched' });
  }

  render() {
    return (
      <div>
        <h1>This is master component</h1>
        <h2>My Name is {this.state.parentName}</h2>
        <div>The State From the Master is {this.state.message}</div>
        <Child
          data={this.state}
          greetHandler={this.greetParent}
          nameHandler={this.changeName}
          homeHandler={this.changeHome}
        />
      </div>
    );
  }
}
export default Master;


import React from 'react';
import GrandChild from './grandchild';

export default function Child(props) {
  return (
    <div>
      <h2>the {props.data.parentName}</h2>
      <button onClick={() => props.greetHandler()}>greetme</button>
      <button onClick={() => props.nameHandler()}>Change Name</button>

      <GrandChild
        greetHandler={props.greetHandler}
        nameHandler={props.nameHandler}
        homeHandler={props.homeHandler}
        data={props.data}
      />
    </div>
  );
}


import React from 'react'

export default function GrandChild(props) {
  return (
    <div>
      <h4>I live in a {props.home}</h4>
      <button onClick={props.homeHandler()}>change home</button>
    </div>
  )
}

Answer 1

在 grandChild 中，您在每次渲染时立即调用 homeHandler，导致状态更新、重新渲染和重复。您需要遵循 this 在函数中的模式，而不是自动调用它。

<button onClick={() => props.homeHandler()}>change home</button>

React Error: Maximum update depth exceeded - simple example

React Error: Maximum update depth exceeded - simple example

function

reactjs

react-props