反应错误：超出最大更新深度 - 简单示例

Question

我正在尝试使用master中的一些函数。js组件。当我运行下面的代码时，我得到错误“error:Maximum update depth exceeded。当组件在componentWillUpdate或componentDidUpdate.React中重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量，以防出现无限循环。”

我在孙子组件中添加按钮时出错了。

      <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

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

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