Reactjs 在react NOT works中函数isloggedin

我开始在React中学习和实践，我的想法是制作一个登录屏幕，在那里我调用RESTAPI并将用户存储在内存中，在登录时我将用户重定向到一个主页。问题是，我希望如果用户登录，就不能查看登录屏幕。为此，我将“isLogged”状态发送到“login”组件，如果用户具有“Logged”状态，我希望重定向它。问题在于，该状态未正确设置：

app.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom'
import './App.css';
import Login from './Pages/Login/Login'
import Logout from './Pages/Logout/Logout'
import Home from './Pages/Home/Home'


export default class App extends Component{
  constructor(){
    super();

    this.state = {
      loggedIn: "no-logueado",
      user:{},
    };

    this.handleLogin = this.handleLogin.bind(this);
    this.handleLogout = this.handleLogout.bind(this);
    this.loggedIn = this.loggedIn.bind(this);  

  }

  handleLogin(data){
    this.setState({
      loggedIn: "Logueado",
      user: data
    });
  }

  handleLogout(){
    this.setState({
      loggedIn: "no-logueado",
      user: {}
    });
  }

  isLoggedin(){
    const token = localStorage.getItem("authToken");
    if(this.state.loggedIn === "no-logueado" && token){
      this.setState({
        loggedIn: "Logueado",
        user: token
      });
    }
  }

  loggedIn(data){
    if(data === "Logueado"){
      window.location="/home";
    }
  }

async componentDidMount(){
  await this.isLoggedin();
}

  render() {
    
      return (
        <Router>
          <Route exact path="/" render={props => ( <Login {... props} handleLogin={this.handleLogin} loggedIn={this.state.loggedIn}/>)} />
          <Route exact path="/logout" render={props => ( <Logout {... props} handleLogout={this.handleLogout}/>)} />
          <Route exact path="/home" render={props => (<Home {... props} loggedIn={this.loggedIn} log={this.state.loggedIn}/>)} />


          <script src="https://unpkg.com/react/umd/react.production.min.js" crossorigin></script>

          <script
            src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
            crossorigin></script>

          <script
            src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
            crossorigin></script>

          <script>var Alert = ReactBootstrap.Alert;</script>
        </Router>
      );
  }
}

import React，{Component}来自'React'；
从“react Router dom”导入{BrowserRouter as Router，Route}
导入“/App.css”；
从“./Pages/Login/Login”导入登录名
从“./Pages/Logout/Logout”导入注销
从“./Pages/Home/Home”导入主页
导出默认类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
loggedIn：“没有logueado”，
用户：{}，
};
this.handleLogin=this.handleLogin.bind（this）；
this.handleLogout=this.handleLogout.bind（this）；
this.loggedIn=this.loggedIn.bind（this）；
}
handleLogin（数据）{
这是我的国家({
loggedIn：“Logueado”，
用户：数据
});
}
handleLogout（）{
这是我的国家({
loggedIn：“没有logueado”，
用户：{}
});
}
伊斯洛格丁（）{
const token=localStorage.getItem（“authToken”）；
if（this.state.loggedIn==“no logueado”&&token）{
这是我的国家({
loggedIn：“Logueado”，
用户：令牌
});
}
}
loggedIn（数据）{
如果（数据==“Logueado”）{
window.location=“/home”；
}
}
异步组件didmount（）{
等待这个；
}
render（）{
返回(
( )} />
( )} />
()} />
var-Alert=ReactBootstrap.Alert；
);
}
}

登录

import React，{Component}来自“React”
从“./Components/Input/Input”导入输入
从“./Components/Label/Label”导入标签
导入'bootstrap/dist/css/bootstrap.min.css'；
导入“./Login.css”
从“react bootstrap”导入{容器、行、列、按钮}
导出默认类登录扩展组件{
建造师（道具）{
超级（道具）；
此.state={
用户：“”，
密码：“”
}
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
this.handleSuccessfullAuth=this.handleSuccessfullAuth.bind（this）；
}
handleChange（名称、值）{
如果（名称=='username'）{
this.setState（{user:value}）；
}否则{
this.setState（{password:value}）；
}
}
异步handleSubmit（）{
常量请求选项={
方法：“POST”，
标题：{'Content-Type'：'application/json'}，
正文：JSON.stringify（{
电子邮件：this.state.user，
密码：this.state.password
})
};
const response=等待获取（'http://localhost:4000/login",选择),；
log（response.ok）；
if（response.ok）{
const res=wait response.json（）；
setItem（“authToken”，res.token）
此.handleSuccessfullAuth（res）；
}否则{
console.log（“token”，localStorage.getItem（“authToken”））
}
}
handleSuccessfullAuth（数据）{
this.props.handleLogin（数据）；
this.props.history.push（“/home”）；
}
componentDidMount（）{
console.log（this.props.loggedIn）
}
render（）{
报税表（
“比恩维多！
{this.props.loggedIn}




伊尼西亚·塞西翁{''}
)
}
}

当我通过控制台看到状态如何达到“登录”时，虽然屏幕显示我为“登录”，但显示为“未登录”

我想我需要先学习一些东西，否则我会错过一些东西，你能帮我吗

家

import React，{Component}来自“React”
从“../../Components/Menu”导入菜单
导出默认类Home extends组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
)
}
}

如果用户登录，您可以使用

'react-router-dom'

中的

重定向组件将登录页面重定向到主页

只需在
render（）函数中添加一个条件返回

render（）{
if（this.props.loggedIn==状态\u登录\u）{
返回；
}
返回(
...

我还冒昧地重构了您的组件。我有一些建议给您

箭头函数
首先，您可以使用箭头函数代替需要绑定的类方法。箭头函数没有
this
关键字，因此不需要绑定

handleLogin=（数据）=>{
这是我的国家({
loggedIn：状态为已登录，
用户：数据，
});
};

路线儿童
其次，我建议您使用
呈现的
子类
形式。它更干净，更易于操作
import React, { Component } from 'react'
import Input from './Components/Input/input'
import Label from './Components/Label/Label'
import 'bootstrap/dist/css/bootstrap.min.css';
import './Login.css'
import {Container, Row, Col, Button} from 'react-bootstrap'

export default class Login extends Component {
    constructor(props) {
        super(props);

        this.state = {
            user:' ',
            password:' '
        }

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleSuccessfullAuth = this.handleSuccessfullAuth.bind(this);
    }

    handleChange(name, value) {
        if(name==='username'){
            this.setState({user:value});
        } else {
            this.setState({password:value});
        }
    }

    async handleSubmit(){

            const requestOptions = {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({ 
                        email: this.state.user,
                        password:this.state.password
                    })
            };
            
            const response = await fetch('http://localhost:4000/login', requestOptions);
            console.log(response.ok);
            if(response.ok){
                const res = await response.json();
                localStorage.setItem("authToken", res.token)
                this.handleSuccessfullAuth(res);
            } else {
                console.log("token", localStorage.getItem("authToken"))
            }
             
        }

        handleSuccessfullAuth(data){
            this.props.handleLogin(data);
            this.props.history.push("/home");
        }
    
        componentDidMount(){
            console.log(this.props.loggedIn)
        }

    render(){
        return (       
            <div id="login-background">
                <Container>
                    <Row>
                        <Col xs={6}>
                            <Col xs={8}  className="back">
                                <h2 className="tittle-login">¡ Bienvenido !</h2>
                                <h2 className="tittle-login">{this.props.loggedIn}</h2>
                                <hr className="hr-design"></hr>
                            <Label text='Usuario'/>
                            <Input attribute= {{
                                id: 'username',
                                name:'username',
                                type:'text',
                                placeholder:'Ingrese su usuario ...',
                                className:'form-control'
                            }}
                            handleChange={this.handleChange}
                            />
                            <Label text='Contraseña'/>
                            <Input attribute= {{
                                id: 'password',
                                name:'password',
                                type:'password',
                                placeholder:'Ingrese su contraseña ...',
                                className:'form-control'
                            }}
                            handleChange={this.handleChange}
                            /><br></br>
                            <Button variant="primary" size="lg" block onClick={this.handleSubmit}>Iniciar Sesión</Button>{' '}
                            </Col>
                            <Col xs={4}>

                            </Col>
                                
                        </Col>
                        <Col>
                        
                        </Col>
                            
                    </Row>
                </Container>
            </div>
        )
    }
}



import React, { Component } from 'react'
import Menu from '../../Components/Menu'


export default class Home extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
               <Menu/>
            </div>
        )
    }
}