渲染（）功能在反应中无法正常工作

Question

I am using the MERN stack for developing a website. I used passport.js for local authentication. The user logins through a login form on '/login' on the frontend. Once the user clicks on the submit button I prevent its default behaviour and send an axios post request at '/login' on the backend. Once the user is authenticated I send the user to '/products' on the frontend. To know if the user is authenticated or not, I send an axios get request at '/login' at the backend in the compoundDidMount() function which sets the state property loggedIn to true if user is authenticated, else false . If I once again visit '/login' route on the frontend I should be redirected to '/products' on the frontend without rendering the code in else statement (login form) based on the code in the render() funtion. But first, the code in the else statement (login form) is getting rendered for a fraction of a second and then it's rendering the component on '/products' . Why is this happening? I don't want the login form to be rendered once I am logged in, on visiting the '/login' route on the frontend. Here is my code.

login.js (Login component)

import React, { Component } from 'react';
import {Redirect} from 'react-router-dom';
import axios from 'axios';

class Login extends Component {
    state = {
        email: "",
        password: "",
        loggedIn: false
    }
    
    handleLogin = event => {
        event.preventDefault();
        const data = {
            email: this.state.email, 
            password: this.state.password
        };
        axios.post('/login', data)
        .then(response => {
            // console.log("response status code: ", response.status);
            if(response.status === 200) {
                // this.setState({loggedIn: true});
                this.props.history.push('/products');
            }
        })
        .catch(error => console.log('error is :', error));
    }

    handleChange = event => {
        const property  = event.target.name,
              value     = event.target.value;
        this.setState({[property]: value});
    }

    componentDidMount() {
        this.getLoggedInStatus();
    }

    getLoggedInStatus = () => {
        axios.get('/login')
        .then(response => {
            console.log("response.data is: ", response.data.loggedIn);
            this.setState({loggedIn: response.data.loggedIn});
            // if(response.data.loggedIn)
            //     this.props.history.push('/products');
        })
        .catch(error => console.log("error is : ", error));
        // return loggedIn;
    }

    render() { 
        // this.getLoggedInStatus();
        // console.log("loggedIn is: ", this.state.loggedIn);
        if(this.state.loggedIn) {
            console.log('Working');
            return <Redirect to="/products" />
        }
        else {
            console.log('not working');
            return (
                <div className="container d-flex justify-content-center mt-5">
                    <form className="w-50 mt-2" action="/login" method="POST" onSubmit={this.handleLogin}>
                        <div className="form-group">
                            <label for="exampleInputEmail1">Email address</label>
                            <input type="email" className="form-control" name="email" onChange={this.handleChange} id="exampleInputEmail1" aria-describedby="emailHelp" required/>
                            <small id="emailHelp" className="form-text text-muted">We'll never share your email with anyone else.</small>
                        </div>
                        <div className="form-group">
                            <label for="exampleInputPassword1">Password</label>
                            <input type="password" className="form-control" name="password" onChange={this.handleChange} id="exampleInputPassword1" required/>
                        </div>
                        <button type="submit" className="btn btn-primary">Submit</button>
                    </form>
                </div>
            );
        } 
    }
}
 
export default Login;

backend code

router.get('/login', (request, response) => {
    response.json({loggedIn: request.isAuthenticated()});
});

router.post('/login', passport.authenticate('local'), (request, response) => {
    if(request.isAuthenticated())
        // response.json('successful login');
        response.status(200).send({message: 'successful login'});
    else {
        console.log('Not authenticated');
        response.status(404).send({message: 'unsuccessful login'});
    }
});

Answer 1

You may want to use isLoading state and show a spinner while the request is in process.

---

state = {
        email: "",
        password: "",
        loggedIn: false
        idLoading: false
    }

...

getLoggedInStatus = () => {
        this.setState({ isLoading: true });
        axios.get('/login')
        .then(response => {
            console.log("response.data is: ", response.data.loggedIn);
            this.setState({loggedIn: response.data.loggedIn, isLoading: false});
            // if(response.data.loggedIn)
            //     this.props.history.push('/products');
        })
        .catch(error => console.log("error is : ", error));
        // return loggedIn;
    }

...

render() { 
        // this.getLoggedInStatus();
        // console.log("loggedIn is: ", this.state.loggedIn);
        if(this.state.loggedIn) {
            console.log('Working');
            return <Redirect to="/products" />
        }
        else {
            if (this.state.isLoading) {
              <div>Loading...</div>
            }
            return (
                <div className="container d-flex justify-content-center mt-5">
                    <form className="w-50 mt-2" action="/login" method="POST" onSubmit={this.handleLogin}>
                        <div className="form-group">
                            <label for="exampleInputEmail1">Email address</label>
                            <input type="email" className="form-control" name="email" onChange={this.handleChange} id="exampleInputEmail1" aria-describedby="emailHelp" required/>
                            <small id="emailHelp" className="form-text text-muted">We'll never share your email with anyone else.</small>
                        </div>
                        <div className="form-group">
                            <label for="exampleInputPassword1">Password</label>
                            <input type="password" className="form-control" name="password" onChange={this.handleChange} id="exampleInputPassword1" required/>
                        </div>
                        <button type="submit" className="btn btn-primary">Submit</button>
                    </form>
                </div>
            );
        } 
    }

Answer 2

React component life-cycle methods are called in the following sequence:

Constructor -> componentWillMount -> render -> componentDidMount

Every time when you go to login page a NEW instance of your Login component gets created. Your "implicit" constructor initializes a new instance with state.loggedIn to false by

state = {
        email: "",
        password: "",
        loggedIn: false
    }

This causes your render function to show login form and call componentDidMount which sends a request to the backend. While your component is waiting for a response from the backend - login form is shown on the screen. Once response comes in - you set state.loggedIn to true which causes another render call and this time your component redirects to a products page.

In order to fix your problem you need to move loggedIn property from component state level to application state level by using something like redux or any other approach to manage front-end application state.

Answer 3

Suggestion

Add an extra property (ie loading) to your state object to track if the login should render or not (and perhaps adding a loading component). See code comment as well.

Example:

// Your component state
state = {
        email: "",
        password: "",
        loggedIn: false,
        loading: true // default state
};


// Your getLoggedInStatus code

 getLoggedInStatus = () => {
    axios.get('/login')
    .then(response => {
        console.log("response.data is: ", response.data.loggedIn);
        this.setState({loggedIn: response.data.loggedIn, loading: false}); // update loading state to false
    })
    .catch(error => console.log("error is : ", error));
    // return loggedIn;
}


// Your render code

render() { 
        // this.getLoggedInStatus();
        // console.log("loggedIn is: ", this.state.loggedIn);
        if(this.state.loggedIn) {
            console.log('Working');
            return <Redirect to="/products" />
        }
        else {
            if(this.state.loading) {
               return(<div> Loading...</div>); // Have something more fancy here
            } else {
              return (
                <div className="container d-flex justify-content-center mt-5">
                    <form className="w-50 mt-2" action="/login" method="POST" onSubmit={this.handleLogin}>
                        <div className="form-group">
                            <label for="exampleInputEmail1">Email address</label>
                            <input type="email" className="form-control" name="email" onChange={this.handleChange} id="exampleInputEmail1" aria-describedby="emailHelp" required/>
                            <small id="emailHelp" className="form-text text-muted">We'll never share your email with anyone else.</small>
                        </div>
                        <div className="form-group">
                            <label for="exampleInputPassword1">Password</label>
                            <input type="password" className="form-control" name="password" onChange={this.handleChange} id="exampleInputPassword1" required/>
                        </div>
                        <button type="submit" className="btn btn-primary">Submit</button>
                    </form>
                </div>
            );
            }
        } 
    }