Ошибка реагирования: превышена максимальная глубина обновления - простой пример - PullRequest
Новая
       32

Ошибка реагирования: превышена максимальная глубина обновления - простой пример

0 голосов
/ 04 апреля 2020

Я пытаюсь использовать некоторые функции в компоненте master. js. Когда я запускаю приведенный ниже код, я получаю сообщение об ошибке «Ошибка: превышена максимальная глубина обновления. Это может произойти, когда компонент повторно вызывает setState внутри componentWillUpdate или componentDidUpdate. 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>
  )
}

1 Ответ

1 голос
/ 04 апреля 2020

В grandChild вы вызываете homeHandler сразу на каждом рендере, вызывая обновление состояния, вызывая повторный рендеринг и повтор. Вам нужно следовать шаблону, где это находится внутри функции, а не вызывать ее автоматически. 

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