Good Morning, I am trying to develop a React app to communicate with a backend through REST APIs.
The app architecture uses also React Router and implements authentication feature with a JWT token given by the server and stored in the SessionStorage.
Basically:
- a user connects to the app
- if the user is not logged in, he is redirected to login page
- when logged in it is redirect to homepage with path
/entsorga/home, which should display the component with path/entsorgaand the component with path/entsorga/home(if a understood the working of React Router well)
By the starting of the app, a user is correctly redirected to login page and can authenticate correctly, afte the authentication the page url is changed in the correct way but the components does not render and the subsequent error is shown.
While I am totally new to React, I am facing the error:
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.
I know the error comes from the fact that a function continously calls setState, I already tried to eliminate one by one the calls to the function but this does not solve the issue, so it shouldn't be about one of my functions.
is there something I maybe miss from React Router which interacts with components lifecycle hooks and make this error happen?
index.tsx page:
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<Route exact path='/'>
{authenticationService.isUserAuthenticated() ? <Redirect to='/entsorgafin' /> : <Login />}
</Route>
<Route path='/entsorgafin'>
{authenticationService.isUserAuthenticated() ? <Redirect to='/entsorga/home' /> : <Redirect to='/' />}
</Route>
<Switch>
<Route path='/entsorga' component={Header} />
<Route path='/entsorga/home' component={Homepage} />
</Switch>
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
Header.tsx component:
class Header
extends Component<any, any>
{
//costruttore
constructor(props: any)
{
//props management
super(props);
//state management
this.state = {
anniAttivita: [],
nomeProprietaGrafici: [],
loggedIn: authenticationService.isUserAuthenticated
}
//methods binding
this.getAnniAttivita = this.getAnniAttivita.bind(this);
this.setProprietaCruscotto = this.setProprietaCruscotto.bind(this);
this.logout = this.logout.bind(this);
}
//component lifecycle hook --> creation
componentDidMount()
{
this.getAnniAttivita();
this.setProprietaCruscotto();
}
//metodo per recuperare gli anni di attività dell'impianto
getAnniAttivita()
{
utilityService.recuperaAnniAttivita().then(
r =>
{
this.setState({anniAttivita: r.data})
}
);
}
//metodo per settare le proprietà disponibili all'interno del cruscotto
setProprietaCruscotto()
{
let proprietaGrafici = [
{
beName: "caloPesoGiorno",
feName: "Calo Peso Giornaliero"
},
{
beName: "caloPeso",
feName: "Calo Peso"
},
{
beName: "temperaturaMateriale",
feName: "Temperatura Materiale"
},
{
beName: "temperaturaReattore",
feName: "Temperatura Reattore"
},
{
beName: "rhInterna",
feName: "RH Interna"
},
{
beName: "deltaP",
feName: "Delta P"
},
{
beName: "tempoLatenza55",
feName: "Tempo Latenza 55"
},
{
beName: "ph",
feName: "PH"
},
{
beName: "rh",
feName: "RH"
},
{
beName: "germinazione",
feName: "Germinazione"
},
{
beName: "inerti_litoidi",
feName: "Inerti Litoidi"
},
{
beName: "plastiche_vetri_metalli",
feName: "Plastiche, Vetri, Metalli"
}
]
this.setState({nomeProprietaGrafici: proprietaGrafici});
}
//effettua il logout
logout()
{
authenticationService.logout();
this.setState({loggedIn: false});
}
//metodo che effettua il render del componente
render()
{
if (this.state.loggedIn)
{
return (
<Redirect to='/' />
);
}
return (
<nav className="navbar navbar-light sticky-top navbar-expand-xl py-0 pl-0">
<Link className="navbar-brand py-0" to={"/entsorgafin/home"}>
<img src={logo} className="img-fluid d-inline-block align-top" alt="EntsorgaFin logo" />
</Link>
<button className="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon" />
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav mr-auto">
<li className="nav-item dropdown with-right-border">
<Link className="nav-link dropdown-toggle text-dark" to="#"
id="tracciabilitaLottiNavbarDropdown"
role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
DOCUMENTO TRACCIABILITÁ LOTTI
</Link>
<div className="dropdown-menu" aria-labelledby="tracciabilitaLottiNavbarDropdown">
{
//creazione di un link per ogni anno di attività
this.state.anniAttivita.map(
(anno: number) =>
{
return (
<Fragment>
<Link key={anno} className="dropdown-item text-center"
to={"/entsorgafin/tracciabilitaLotti"}>{anno}</Link>
<div className="dropdown-divider custom-dropdown-divider" />
</Fragment>
);
}
)
}
</div>
</li>
<li className="nav-item dropdown with-right-border">
<Link className="nav-link dropdown-toggle text-dark" to="#"
id="performanceImpiantoNavbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
PERFORMANCE D'IMPIANTO
</Link>
<div className="dropdown-menu" aria-labelledby="performanceImpiantoNavbarDropdown">
{
//creazione di un link per ogni anno di attività
this.state.anniAttivita.map(
(anno: number) =>
{
return (
<Fragment>
<Link key={anno} className="dropdown-item text-center"
to={"/entsorgafin/performanceImpianto"}>{anno}</Link>
<div className="dropdown-divider custom-dropdown-divider" />
</Fragment>
);
}
)
}
</div>
</li>
<li className="nav-item dropdown">
<Link className="nav-link dropdown-toggle text-dark" to="#"
id="cruscottoCompletoNavbarDropdown"
role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
CRUSCOTTO COMPLETO
</Link>
<div className="dropdown-menu" aria-labelledby="cruscottoCompletoNavbarDropdown">
{
//creazione di un link per ogni nome di proprietà disponibile
this.state.nomeProprietaGrafici.map(
(beName: string,
feName: string) =>
{
return (
<Fragment>
<Link key={beName}
className="dropdown-item text-center"
to={"/entsorgafin/performanceImpianto"}>${feName}</Link>
<div className="dropdown-divider" />
</Fragment>
);
}
)
}
</div>
</li>
</ul>
{/*<ul className="nav navbar-nav float-right-element">*/}
{/*<li>*/}
{/* /!*<h6 className="no-margin vertical-align-text mr-1">Utente attivo:*!/*/}
{/* /!* ${authenticationService.getCurrentUserName()} </h6>*!/*/}
{/*</li>*/}
{/*<li>*/}
{/*<button className="btn btn-sm btn-dark" onChange={this.logout}>Logout</button>*/}
{/*</li>*/}
{/*</ul>*/}
</div>
</nav>
);
}
}
export default Header;
Login.tsx component:
class Login
extends Component<any, any>
{
//costruttore
constructor(props: any)
{
//props management
super(props);
//state management
this.state = {
username: '',
password: '',
loggedIn: authenticationService.isUserAuthenticated()
}
//methods binding
this.handleLogin = this.handleLogin.bind(this);
this.onChangeUserName = this.onChangeUserName.bind(this);
this.onChangePassword = this.onChangePassword.bind(this);
}
onChangeUserName(e: any)
{
this.setState({
username: e.target.value
});
}
onChangePassword(e: any)
{
this.setState({
password: e.target.value
});
}
handleLogin(e: any)
{
e.preventDefault();
authenticationService.authenticate(this.state.username, this.state.password).then(
() =>
{
this.setState({loggedIn: true});
}
);
}
render()
{
if (this.state.loggedIn)
{
return (
<Redirect push to='/entsorga/home' />
);
}
return (
<div className="col-md-12">
<div className="card">
Carta
</div>
<form onSubmit={this.handleLogin}>
<div className="form-group">
<label htmlFor="username">Nome Utente</label>
<input type="text" className="form-control" name="username" value={this.state.username}
onChange={this.onChangeUserName} required={true} />
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<input type="password" className="form-control" name="password" value={this.state.password}
onChange={this.onChangePassword} required={true} />
</div>
<div className="form-group">
<button className="btn btn-primary btn-block" type="submit" value="submit">
Login
</button>
</div>
</form>
</div>
);
}
}
export default Login;
The homepage simply prints "Homepage" with an H1 title.
EDIT
I edited the index.tsx class this way:
<Switch>
<Route exact path='/'>
{authenticationService.isUserAuthenticated() ? <Redirect to='/entsorga/home' /> : <Login />}
</Route>
<Route path='/entsorga' component={Header} />
<Route path='/entsorga/home' component={Homepage} />
<Route path='/entsorga/tracciabilitaLotti' component={tracciabilitaLotti} />
<Route path='/entsorga/performanceImpianto' component={performanceImpianto} />
<Route path='/entsorga/graficiCruscotto' component={graficiCruscotto} />
</Switch>
but the problem is not solved, the places in which the redirects are:
in index.tsx file which redirect the user to if not logged in or to homepage otherwise
<Route exact path='/'> {authenticationService.isUserAuthenticated() ? <Redirect to='/entsorga/home' /> : <Login />} </Route>in login.tsx file which redirect to homepage in case of successful login:
if (this.state.loggedIn) { return ( Redirect push to='/entsorga/home' ); }
header.tsx file which redirect to / in case the user is not logged in (to prevent to see the page in case a user is not logged in)
if (this.state.loggedIn) { return ( Redirect to='/' ); }
The loggedIn state is given in the constructor of the component by a helper function calling a service, I am sure the authentication is successful as I can print the authentication token in logs.
The Header.tsx component should be dispayed along all pages, that's why i placed it in the path /entsorga and all the other components are at /entsorga/**.
EDIT 2
In the server logs, I can see that there are multiple requests from React (a lot more than the one needed) as if the Header.tsx component is continously re-rendering: I read that a component re-renders automatically when its state is modified, in Header component the state is modified in the constructor and when performing logout (not yet used), setProprietaCruscotto (used only once) and getAnniAttivita, which may be the reason of the continous reloading.
The getAnniAttivita function calls an API trhough Axios to get some data from a server which responds with a 401 (as it should for now), could Axios be the reason of the continous reloading? maybe after an error Axios retries until the call is successful making the state change multiple times?
