How To Solve "Maximum update depth exceeded" In React (Set state)

Question

I'm getting the 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."


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>
    );
  }
}

What I'm trying to do is update the state when I get a specific result from the server (therefore the switch).

The end result should show a different message every time you get a specific response.

What does Form component do with the data prop? Does it call it on every update? It would be helpful if you shared a minimal example of the Form component. — maazadeeb
– maazadeeb, Commented Apr 14, 2019 at 10:08
Shouldn't the state be initialized in the constructor and not in componentDidMount()? — Parama Kar
– Parama Kar, Commented Apr 14, 2019 at 11:21

jsdeveloper · Accepted Answer · 2019-04-14 10:16:40Z

2

This happens when you enter an infinite render loop - ie you call setstate (triggering render()) which somewhere down the line triggers another setstate (and another render()).

React keeps count on how many renders are triggered in a row and if you exceed the maximum count (maximum update depth), then it will throw this error and assume you have an infinite render loop problem.

answered Apr 14, 2019 at 10:16

jsdeveloper

4,0751 gold badge18 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tai Alt · Accepted Answer · 2019-04-14 11:55:37Z

0

The problem I had was with the data prop sent to the Form component. Its a mistake I fined myself do alot, next time ill try avoiding prop drilling and setting state more cautiously if at all. For me working with variables work way better most of the times.

Example:

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

And not

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

Unless its somthing that should be renderd on the DOM of course

answered Apr 14, 2019 at 11:55

Tai Alt

1172 silver badges12 bronze badges

Collectives™ on Stack Overflow

How To Solve "Maximum update depth exceeded" In React (Set state)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related