Пытаетесь обновить состояние с помощью setstate внутри компонента return в реагировать и получаете сообщение «Ошибка максимальной глубины обновления, превышенная»? - PullRequest
Новая
       2

Пытаетесь обновить состояние с помощью setstate внутри компонента return в реагировать и получаете сообщение «Ошибка максимальной глубины обновления, превышенная»?

0 голосов
/ 20 мая 2019

Я пытаюсь обновить состояние непосредственно внутри возврата, не используя какой-либо метод жизненного цикла, и получаю ошибку, подобную этой:

Превышена максимальная глубина обновления. Это может произойти, когда компонент повторно вызывает setState внутри componentWillUpdate или componentDidUpdate. React ограничивает количество вложенных обновлений для предотвращения бесконечных циклов.

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

import React, { Component } from "react";

import "./App.css";

class App extends Component {
  state = {
    name: "john"
  };

  render() {
    console.log(this.state);
    return (
      <div className="App">
        <header className="App-header">
          {this.state.name}
          {this.setState({ name: "abc" })}
        </header>
      </div>
    );
  }
}

export default App;

Я написал приведенный выше код и получаю сообщение об ошибке, но в консоли значение состояния обновляется и много раз печатается.

Ответы [ 2 ]

2 голосов
/ 20 мая 2019

  1. У вас есть эта ошибка, потому что setState запускает повторный рендеринг компонента каждый раз, когда ваш компонент рендерится.Это приводит к бесконечному циклу обновлений.

    setState () всегда будет приводить к повторному рендерингу, если shouldComponentUpdate () не возвращает false.

  2. Да, для обновления состояния необходимо использовать функцию или метод жизненного цикла.Вы не должны обновлять состояние непосредственно в функции рендеринга.Вы должны подготовить ваши данные для рендеринга перед рендерингом и обновить состояние в методах жизненного цикла или в обратных вызовах.

0 голосов
/ 20 мая 2019

Это потому, что вы используете setState в методе render.Вы не можете использовать setState внутри метода render, потому что это приведет к повторному рендерингу компонента снова и снова.Потому что в реагирующем приложении Компонент перерисовывается только в том случае, если Props передается этому компоненту или когда вызывается setState.

Таким образом, вы можете использовать componentDidMount жизненный цикл для установки состояния.

...