未登录时重定向使用

Question

我正在尝试重定向用户，如果他/她还没有登录。我正在使用下面的狙击手来做那件事。

if(!this.props.isAuthenticated){
    this.nextPath('/account/login')
}

我也附上了完整的代码。请帮助我调试此问题。

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

从错误中可以清楚地看出，您在ComponentDidUpdate中提到的“if”条件正在重复调用setState。这就是为什么react框架限制。请参考组件Did更新