Определенная строка кода выполняется с задержкой, и страница автоматически обновляется при использовании компонента класса - PullRequest
Новая
       4

Определенная строка кода выполняется с задержкой, и страница автоматически обновляется при использовании компонента класса

0 голосов
/ 19 января 2020

Я пишу некоторый код в React, который позволяет вам «войти», просто нажав кнопку «Easy Log in». Логика c довольно проста; есть переменная состояния "loggedin", и троичный оператор решает, какой из <Login> компонент и <h1> (сообщение "Welcome") он отображает в зависимости от того, является ли значение loggedin истинным или ложным.

Сначала я писал в functional components и работал совершенно нормально, но когда я попытался переписать в class components, он вдруг начал вести себя странно.

Страница просто обновляется при нажатии кнопки «Простой вход».

Я добавил concole.log и alert в функцию, как показано ниже, чтобы увидеть, что происходит, 

letLogin(){
   this.setState({ loggedin: true});
   console.log("The value of loggedin: " + this.state.loggedin);
   alert("letLogin got called!");
}

и вот что я не совсем понимаю. Значение loggedin было false, когда появилось всплывающее окно с предупреждением, но когда я закрыл всплывающее окно с предупреждением, значение на мгновение переключилось на true, и страница немедленно перезагрузилась, и значение вернулось до false снова.

Что может быть причиной этого?

Я вставлю часть кода ниже.

[App.jsx] (написано в функциональном компоненте, отлично работает) 

import React, { useState } from "react";
import Header from "./Header";
import Footer from "./Footer";
import Login from "./Login";

function App(){
    const [loggedin, setBoolean] = useState(false);
    function letLogin(){       
        setBoolean(true);
    }
    function letLogout(){
        setBoolean(false);
    }  

    return <div>
        <Header onClick={letLogout}  />
        {!loggedin? 
            <Login onClick={letLogin} />:
            <div>
                <h1>Welcome!</h1>
                <Footer/>
            </div>
        }
    </div>
}

export default App;

[App.jsx] (написано в классе компонент, глючит) 

import React, { useState } from "react";
import Header from "./Header";
import Footer from "./Footer";
import Login from "./Login";

class App extends React.Component{
    constructor(){
        super();
        this.state = {
            loggedin: false
        }
        this.letLogin = this.letLogin.bind(this);
        this.letLogout = this.letLogout.bind(this);
    }
    letLogin(){
        this.setState({ loggedin: true});
        console.log("The value of loggedin: " + this.state.loggedin);
        alert("letLogin got called!");
    }
    letLogout(){
        this.setState({ loggedin: false});
    }
    render(){
    return <div>
        <Header onClick={this.letLogout}  />
        {!this.loggedin? 
            <Login onClick={this.letLogin} />:
            <div>
                <h1>Welcome!</h1>
                <Footer/>
            </div>
        }
    </div>
    }
}

export default App;

[Login.jsx] 

import React from "react";

function Login(prop){
    return (
      <div className="login-body">
        <form> 
          <button 
            className="btn btn-success"
            onClick={prop.onClick}
          >   
            Easy Log in
          </button>
          <br></br>
          <p className="alert alert-info">↑ Just click "Easy Log in" and you can log in</p>  
        </form>
      </div> 
    );
}

export default Login;
...