Блог

Я получаю сообщение об ошибке :

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

 
import React, { Component } from "react";
import Form from "../Form/form";
import axios from "axios";

export default class Login extends Component {
  componentDidMount() {
    let url = "http://localhost:5060/users";

    axios.get(url).then(res => {
      console.log(res.data);
      this.setState({ users: res.data });
    });
  }


  getData(value) {

    let res;

    if (value.axios_res) {
      res = value.axios_res.data;
    }
    else{
        return
    }

    switch(res){

        case "user":
        console.log('Please Pick User');
        this.setState({ prompt: "Please Pick User" }) 
        break

        case "password":
        console.log('Please Fill Password');
        this.setState({ prompt: "Please Fill Password" })
        break

        case false:
        console.log('Wrong Password');
        this.setState({ prompt: "Wrong Password" })
        break

        case true:
        console.log("Loging in");
        this.setState({ prompt: "Loging in" })
        break

        default:
        console.log("Login");
    }
  }

  state = {
    users: [],
    prompt : "Welcome to Projector Helper"
  };

  render() {
    let form = [
      // Title
      {
        type: "select",
        name: "theater_name",
        placeholder: "Carmiel, Hifa",
        label: "Theater Name",
        options: this.state.users
      },
      {
        type: "password",
        name: "password",
        placeholder: "Password",
        label: "Password"
      }
    ];

    return (
      <div>
        <div className="row justify-content-center pt-5">
          <div className="col-6">
            <div className="card">
              <img
                src="http://www.kylelambert.com/gallery/stranger-things-netflix/images/stranger-things-season-2-poster-wide-by-kyle-lambert.jpg"
                alt=""
                height="200px"
              />
              <div className="card-body">
                <h5 className="card-title">Welcome</h5>
                <h6 className="card-subtitle mb-2 text-muted">
                  {this.state.prompt}
                </h6>
                <p className="card-text">
                  Please log in to the correct theater location, can't see
                  yourself on the list,
                  <br />
                  <a href="#">Register Now </a>
                </p>
                <Form
                  url="http://localhost:5060/login"
                  form={form}
                  submit="Login"
                  method="get"
                  data={value => this.getData(value)}
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}



 

То, что я пытаюсь сделать, это обновить состояние, когда я получаю определенный результат от сервера (следовательно, коммутатор).

Конечный результат должен показывать другое сообщение каждый раз, когда вы получаете конкретный ответ.

Это происходит, когда вы входите в бесконечный цикл рендеринга, то есть вы вызываете setstate (запуск render() ), который где-то в конце строки запускает другой setstate (и другой render()).

React подсчитывает, сколько рендеров запускается подряд, и если вы превысите максимальное количество (максимальная глубина обновления), то он выдаст эту ошибку и предположит, что у вас проблема с бесконечным циклом рендеринга.

Проблема, с которой я столкнулся, была связана с реквизитом данных, отправленным в компонент формы. Это ошибка, за которую я себя оштрафовал, в следующий раз я постараюсь избегать сверления с опорой и устанавливать состояние более осторожно, если вообще. Для меня работа с переменными в большинстве случаев работает лучше.

Пример:

 username;
Getvalue(value){ 
This.username = value 
}
 

И не

 Getvalue(value){ 
This.setstate({ username : value })
}
 

Если, конечно, это не то, что должно быть отображено в DOM