Блог

Я новичок в React и пытаюсь написать приложение, которое автоматически отображает страницу входа при запуске, а когда пользователь успешно входит в систему, родительский компонент обновляет свое состояние, чтобы отображать компонент панели мониторинга вместо входа.

Я обнаружил, что когда пользователь входит в систему, он правильно обновляет состояние родительских компонентов и отображает компонент панели мониторинга в течение секунды, но затем его состояние снова меняется и повторно отображает компонент входа. Я думаю, что что-то вызывает сброс состояния, но я не уверен, что.

User.js:

 class User extends Component {
    constructor(props) {
        super(props);
        this.state = {
            email: '',
            isLoggedIn: false
        }

        this.updateUser = this.updateUser.bind(this);
    }

    updateUser(newEmail) {
        console.log(`Entered User.updateUser, email: ${newEmail}`);
        this.setState({
            email: newEmail,
            isLoggedIn: false
        });
    }

    render() {
        if (this.state.isLoggedIn) {
            return <Dashboard/>
        }

        return <Login updateTheUser={this.updateUser}/>
    }
}

export default User;
  

Login.js:

 class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            email: '',
            password: '',
        };

        this.handleEmailChange = this.handleEmailChange.bind(this);
        this.handlePasswordChange = this.handlePasswordChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleResponse = this.handleResponse.bind(this);
    }

    handleEmailChange(event) {
        this.setState({email: event.target.value})
    }

    handlePasswordChange(event) {
        this.setState({password: event.target.value})
    }

    handleResponse(res) {
        if (res.ok) {
            alert('Login Successful!');
            this.props.updateTheUser(this.state.email);
        }
        else if (res.status === 401) {
            alert('Wrong Username or Password');
        }        
    }

    async sendLoginRequest(data) {
        await fetch('http://localhost:8000/login/', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json'},
            body: data,
        })
        .then(this.handleResponse)
        .catch(function(error) {
            alert('Server error, please try again.');
            console.error(error);
        });
    }

    handleSubmit(event) {
        const data = `{"email": "${this.state.email}", "password": "${this.state.password}"}`
        this.sendLoginRequest(data);
    }

    render () {
        return (
            <div id="container" className="col-md-12" align="center">
                <div id="vertical-center-div"className="col-sm-4 card bg-light">
                    <Form onSubmit={this.handleSubmit}>
                        <Form.Label className="display-4 text-secondary">Login</Form.Label>
                        <Form.Group controlId="formBasicEmail">
                            <Form.Control type="email" value={this.state.email} onChange={this.handleEmailChange} placeholder="Email" required/>
                        </Form.Group>
                        
                        <Form.Group controlId="formBasicPassword">
                            <Form.Control type="password" value={this.state.password} onChange={this.handlePasswordChange} placeholder="Password" required/>
                        </Form.Group>
                        <Form.Group controlId="formBasicCheckbox">
                            <Form.Check type="checkbox" label="Remember me" />
                        </Form.Group>
                        <Button id="submitButton" variant="primary" type="submit">
                            Submit
                        </Button>
                    </Form>
                </div>
            </div>
        )
    }
}

export default Login;
  

Dashboard.js:

 class Dashboard extends Component {
    constructor(props) {
        super(props);
        this.state = {
            expenses: [],
            incomings: []
        }
    }

    render () {
        return (
            <>
            <p className="display-4">Dashboard</p>
            </>
        )
    }
}

export default Dashboard;
  

Кажется, что в Login.js вам нужно предотвратить поведение отправки по умолчанию с event.preventDefault()

 handleSubmit(event) {
        event.preventDefault()
        const data = `{"email": "${this.state.email}", "password": "${this.state.password}"}`
        this.sendLoginRequest(data);
    }