在登录之后仍然不能进入vip页面?

在登录之后仍然不能进入vip页面?

import React,{Component,Fragment} from "react";

import './style.css';

import axios from "axios";

import {Redirect}  from 'react-router-dom';

class Vip extends Component{

    constructor(props) {

        super(props);

        this.state={

            login:false,

            fetchFinish:false

        }

    }

    componentDidMount() {

        const promise=axios.get("http://www.dell-lee.com/react/api/isLogin.json",{

            withCredentials: true

        });

        promise.then((res)=>{

            this.setState({

                login:res.data.data.login,

                fetchFinish:true

            })

        })

    }

    render(){

                if(this.state.login===true){

                    if(this.state.fetchFinish==true){

                        return  <div className='vip'>vip</div>

                    }else{

                        return <div className='vip'>正在判断</div>

                    }

            }else{

                return <Redirect to='/'/>

                }

    }

}

export default Vip;

import React,{Component,Fragment} from "react";

import './style.css';

import {Button} from "antd";

import {Link} from 'react-router-dom';

import axios from 'axios';

import {Modal} from 'antd';

import { Input,message} from 'antd';

import {withRouter} from 'react-router-dom';

class Log extends Component{

    constructor(props) {

        super(props);

        this.state={

           status:false,

           modal:false,

            password:"",

            username:""

        }

    }

    handlebtn(){

    this.setState({

        modal:true

    })

    }

    handleOk(){

        const promise=axios.get("http://www.dell-lee.com/react/api/login.json?user="+this.state.username+"&password="+this.state.password);

promise.then((res)=>{

            if(res.data.data.login==true){

                  message.success("登录成功");

                this.setState({

                    modal:false,

                    status:true

                })

            }else{

                message.error("登录失败")

            }

        })

    }

    handleCancel(){

        this.setState({

            modal:false

        })

    }

    handllogout(){

        const promise=axios.get("http://www.dell-lee.com/react/api/logout.json");

        promise.then((res)=>{

            if(res.data.data.logout==true){

                this.setState({

                    status:false

                })

            }

        })

    }

    judgebtn(){

        if(this.state.status==false){

            return   <Button className='btn' type="primary" onClick={this.handlebtn.bind(this)}>登录</Button>

        }else{

            return   <Button className='btn' type="primary" onClick={this.handllogout.bind(this)}>

                <Link to='/'>

                退出

                </Link>

            </Button>

        }

    }

    componentDidMount() {

        const promise=axios.get("http://www.dell-lee.com/react/api/isLogin.json");

        promise.then((res)=>{

          this.setState({

              status:res.data.data.login

          })

        })

    }

    handleusrename(e){

        this.setState({

            username:e.target.value

        })

    }

    handlepwd(e){

        this.setState({

            password:e.target.value

        })

    }

    render(){

        return(

            <Fragment>

                {

                this.judgebtn()

            }

               <Link to='/vip'>

                <Button className='btn' type="primary">vip</Button>

               </Link>

                <Modal

                    title="登录"

                    visible={this.state.modal}

                    onOk={this.handleOk.bind(this)}

                    onCancel={this.handleCancel.bind(this)}

                >

                    <Input placeholder="请输入账号" className='inputbtn' onChange={this.handleusrename.bind(this)}/>

                    <Input placeholder="请输入密码" onChange={this.handlepwd.bind(this)}/>

                </Modal>

           </Fragment>

        )

    }

}

export default withRouter(Log);

import React,{Component,Fragment} from 'react';

import ReactDOM from 'react-dom';

import 'antd/dist/antd.css';

import {BrowserRouter,Route,Link,Switch,withRouter} from 'react-router-dom';

import { Layout } from 'antd';

import './style.css';

import Headerapp from './component/head';

import Home from './component/container/Home';

import Detail from "./component/container/Detail";

import Log from './component/login';

import Vip from './component/Vip';

const { Header, Footer, Sider, Content } = Layout;

class Entry extends Component{

    render(){

        return(

            <BrowserRouter>

                <Layout>

                    <Header className='header'>

                        <Headerapp/>

                    </Header>

                    <Content className='content'>

                        <Log/>

                    <Switch>

                        <Route path='/vip' component={Vip}></Route>

                        <Route path='/detail/:id' component={Detail}></Route>

                        <Route path='/:id?' component={Home}></Route>

                    </Switch>

                    </Content>

                    <Footer className='footer'>@MengMeng</Footer>

                </Layout>

            </BrowserRouter>

        )

    }

}

ReactDOM.render(

<Entry/>,

  document.getElementById('root')

);


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕慕子 2020-08-16 14:13:34

同学你好,在源码中测试同学粘贴的代码,因为默认login为false,就直接通过Redirect跳转路由了

http://img1.sycdn.imooc.com//climg/5f38cd7a09eb632908290663.jpg

因为跳转,所以vip组件被销毁,此时点击vip按钮执行componentDidMount下的更新数据操作,就会出现如下报错,所以无法实现效果。

http://img1.sycdn.imooc.com//climg/5f38cda509a41b0219100238.jpg

建议:将login的默认值修改为true,这样进入vip页面后,默认会先执行componentDidMount生命周期函数,根据返回的数据设置login的值,然后在执行render函数,根据login值,跳转到对应的页面。

http://img1.sycdn.imooc.com//climg/5f38ce6009a06ab405040294.jpg

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师