Redirect use if not logged in - node.js

Question

I am trying to redirect the user if he/she has not logged in. I am using the below snipet to do that.
if(!this.props.isAuthenticated){
this.nextPath('/account/login')
}
But when I execute it, I am getting an error. (Error: Maximum update depth exceeded). If I takeoff the above snippet. I am not getting Error.
I have also attached the full code. Help me with debugging this problem.
import React, { Component, Suspense } from 'react'
import { Layout, Menu } from 'antd';
import {TagFilled, SettingFilled , FileAddOutlined, DeleteFilled, LogoutOutlined } from '#ant-design/icons';
import { renderRoutes } from 'react-router-config';
import { loadLabels, deleteLabel} from '../../Store/Action/label'
import { logout } from '../../Store/Action/auth'
import { connect } from 'react-redux';
import Dialog from '#material-ui/core/Dialog';
import DialogActions from '#material-ui/core/DialogActions';
import DialogContent from '#material-ui/core/DialogContent';
import DialogTitle from '#material-ui/core/DialogTitle';
import Button from '#material-ui/core/Button';
import AddLabel from './Components/AddLabel'
import SideBar from './Components/SideBar'
import Avatar from '#material-ui/core/Avatar';
import {Dropdown} from 'react-bootstrap'
import Card from '#material-ui/core/Card';
import CardContent from '#material-ui/core/CardContent';
import { Row, Col, ListGroup } from 'react-bootstrap';
import Typography from '#material-ui/core/Typography';
import Divider from '#material-ui/core/Divider';
import ListSubheader from '#material-ui/core/ListSubheader';
import List from '#material-ui/core/List';
import ListItem from '#material-ui/core/ListItem';
import ListItemIcon from '#material-ui/core/ListItemIcon';
import ListItemText from '#material-ui/core/ListItemText';
import { Redirect } from 'react-router-dom';
const { Header, Content, Footer, Sider } = Layout;
export class HomePage extends Component {
//Constructor
constructor(){
super()
this.state = {
collapsed: false,
addLabelVisible: false,
isHovered: {},
anchorEl: null,
setAnchorEl: null
};
this.addLabelToggle = this.addLabelToggle.bind(this)
this.handleMouseEnter = this.handleMouseEnter.bind(this);
this.handleMouseLeave = this.handleMouseLeave.bind(this);
this.handlelogOut = this.handlelogOut.bind(this);
this.fetchData = this.fetchData.bind(this);
}
//Collapse the Sidebar
onCollapse = collapsed => {
this.setState({ collapsed });
};
//Toogle Add Label Dialog
addLabelToggle(addLabelVisible) {
this.setState({ addLabelVisible });
}
//Fetch All labels from the API
componentDidMount(){
console.log('problem here 1')
this.props.loadLabels()
}
//API CAll
fetchData(){
this.props.loadLabels()
}
//Called Whenever new Label is Added
componentDidUpdate(prevProps) {
if(typeof(prevProps.labels) === 'undefined' ) {
this.fetchData()
}
else if(prevProps.labels === this.props.labels){
this.fetchData()
}else{
}
}
//Hover
handleMouseEnter = index => {
this.setState(prevState => {
return { isHovered: { ...prevState.isHovered, [index]: true } };
});
};
//Hover
handleMouseLeave = index => {
this.setState(prevState => {
return { isHovered: { ...prevState.isHovered, [index]: false } };
});
};
//Delete a Label
handleLabelDelete(id){
const data = {
id: id,
img: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png'
}
this.props.deleteLabel(data)
}
handleClick = (event) => {
this.setState({
anchorEl: event.currentTarget
})
};
handleClose = () => {
this.setState({
anchorEl: null
})
};
handlelogOut = (e) =>{
console.log('logout')
this.props.logout()
}
nextPath(path) {
this.props.history.push(path);
}
render() {
const open = Boolean(this.anchorEl);
const id = open ? 'simple-popover' : undefined;
const { arr, isHovered } = this.state;
console.log(this.props.request)
if(!this.props.isAuthenticated){
this.nextPath('/account/login')
}
return (
<Layout style={{ minHeight: '100vh' }}>
{/* Navbar */}
<Header className="header" style={{ height: '60px', backgroundColor: '#1a243a' }}>
<div style={{ width: '120px', height: '31px', float: 'left', margin: '16px 28px 16px 0' }}>
<h2 style={{ color: 'white' }}>Nexdo</h2>
</div>
<div style={{ float: 'right' }}>
<Dropdown>
<Dropdown.Toggle style={{ backgroundColor: 'transparent', borderColor: 'transparent' }} id="dropdown-basic">
<Avatar>{this.props.user?this.props.user.first_name.slice(0,1):""}</Avatar>
</Dropdown.Toggle>
<Dropdown.Menu>
<Card style={{ background: '#ffffff', boxShadow: 'none', width: '280px' }}>
<CardContent>
<Row>
<Col xs={9}>
<Typography style={{ alignContent: 'right', justifyContent: 'right', display: 'flex' }} variant="h6" noWrap>
{this.props.user?this.props.user.first_name:""} {this.props.user?this.props.user.last_name:""}
</Typography>
<Typography style={{ color: '#333333', fontSize: '11px' , alignContent: 'right', justifyContent: 'right', display: 'flex' }} variant="h6" noWrap>
{this.props.user?this.props.user.email:""}
</Typography>
</Col>
<Col xs={3}>
<Avatar>{this.props.user?this.props.user.first_name.slice(0,1):""}</Avatar>
</Col>
</Row>
</CardContent>
<Divider />
<List
component="nav"
aria-labelledby="nested-list-subheader"
subheader={
<ListSubheader component="div" id="nested-list-subheader">
Actions
</ListSubheader>
}
>
<ListItem button>
<ListItemIcon>
<SettingFilled />
</ListItemIcon>
<ListItemText primary="Profile" />
</ListItem>
<a onClick={this.handlelogOut}>
<ListItem button>
<ListItemIcon>
<LogoutOutlined />
</ListItemIcon>
<ListItemText primary="Logout" />
</ListItem>
</a>
</List>
</Card>
</Dropdown.Menu>
</Dropdown>
</div>
</Header>
{/* SideBar and Content */}
<Layout className="site-layout">
<SideBar labelData = {this.props.labels} addLabelToggle = {this.addLabelToggle}/>
{/* Content which will be loaded dynamically */}
<Content style={{ margin: '0 16px' }}>
<main style={{ backgroundColor: "#fafafa", minHeight: '-webkit-fill-available' }} >
<Suspense fallback={<div>Loading...</div>}>
{renderRoutes(this.props.route.routes,)}
</Suspense>
</main>
</Content>
</Layout>
{/* Footer */}
<Footer style={{ textAlign: 'center' }}>Joan Louji ©2020 Created by Joan Louji</Footer>
{/* Add Label Dialog Box */}
<Dialog scroll="paper" open={this.state.addLabelVisible} onClose={()=>this.addLabelToggle(false)} aria-labelledby="scroll-dialog-title" aria-describedby="scroll-dialog-description">
<DialogTitle id="form-dialog-title"><b>Labels</b></DialogTitle>
<DialogContent>
<div style={{ height: "400px", width: "300px" }}>
{/* Display the Add Label Box */}
<AddLabel editClassName="form-control" value="Create a new Label" />
{this.props.labels?(this.props.labels.length==0?
<div style={{ margin: "0 auto", fontSize: '60px' ,display: 'flex' ,justifyContent: 'center', alignContent: 'center', alignItems: 'center', height: '100%', color: '#e0ebff'}}>
<div className="row">
<div className="col-12">
<FileAddOutlined style={{ margin: "0 auto", fontSize: '60px' ,display: 'flex' ,justifyContent: 'center', alignContent: 'center', alignItems: 'center', height: '100%', width: '100%' ,color: '#e0ebff'}}/>{"\n"}
</div>
<div className="col-12">
<h3 style={{ margin: "0 auto", fontSize: '20px' ,display: 'flex' ,justifyContent: 'center', alignContent: 'center', alignItems: 'center', height: '100%', width: '100%' ,color: '#e0ebff', marginTop: '20px'}}>Label Not Found</h3>
</div>
</div>
</div>
:
""
):"sd"}
{/* Render All the Labels in the Dialog Box */}
{this.props.labels?this.props.labels.map((data,index)=>{
return(
<div style={{ marginTop: '20px', }} >
<div key={data.name}>
<div className="row">
<div className="col-1" onMouseEnter={()=>this.handleMouseEnter(index)} onMouseLeave={()=>this.handleMouseLeave(index)}>
{this.state.isHovered[index]?
<DeleteFilled style={{ fontSize: 17, color: 'grey', cursor: 'pointer' }} onClick={(e)=>this.handleLabelDelete(data._id)}/>
:
<TagFilled style={{ fontSize: 17, color: 'grey' }}/>
}
</div>
<div className="col-9">
{data.name}
</div>
</div>
</div>
</div>
)
}):
<div>
<FileAddOutlined />
</div>
}
</div>
</DialogContent>
<DialogActions>
<Button onClick={(e)=>{
this.addLabelToggle(false)
}}>Done</Button>
</DialogActions>
</Dialog>
</Layout>
);
}
}
//mapStateToProps
const mapStateToProps = (state) => ({
isLoading: state.labels.isLoading,
user: state.auth.user,
labels: state.labels.labels,
});
export default connect(mapStateToProps, {loadLabels, deleteLabel, logout})(HomePage)

Answer 1

From the error, it is clear that there "IF" condition you have mentioned in the ComponentDidUpdate is calling setState repeatedly. That's why the react framework limits.
Please refer Component Did Update