Форма отправки повторно отображает страницу в реакции

Question

У меня есть форма в компоненте реакции.

Когда я нажимаю кнопку отправки, я вызываю signin (). В signin () возникает ошибка, поскольку я вижу вывод в консоли chrome, но он мигает так быстро, что я не могу его прочитать. Затем страница обновляется, и сообщение об ошибке исчезает с консоли.

Почему моя форма повторно отображает страницу? И как я могу подавить повторный рендеринг, чтобы я мог прочитать ошибку?

Вот мой компонент:

import React, { Component } from 'react';
import './login.scss';
import axios from '../axios/axiosInstance';

class Login extends Component {

    constructor() {
        super();

        this.usernameRef = React.createRef();
        this.passwordRef = React.createRef();
    }

    signin() {
        axios.get('/auth', {headers: {
            username: this.usernameRef.current.value,
            password: this.passwordRef.current.value}}).then(response => {
                console.log('response=', response);
            }).catch(err => {
                console.log('err=', err);
            });
    }

    render() {

        return (
            <div className="login-container">
                <form onSubmit={this.signin}>
                    <div className="flex-row-end">
                        <div className="form-element flex-column-end">
                            <input type="text"
                                placeholder="Username or email"
                                name="username"
                                ref={this.usernameRef}
                                required />
                        </div>
                        <div className="form-element flex-column-end">
                            <input type="password"
                                placeholder="Password"
                                name="password"
                                ref={this.passwordRef}
                                required />
                        </div>
                        <div className="login-submit">
                            <button className="submit-login-button" type="submit"><i className="fas fa-sign-in-alt">&nbsp;&nbsp;&nbsp;</i>Sign In</button>
                        </div>
                    </div>
                </form>
            </div>
        );
    }
};

export default Login;

Как вы можете видеть, в signin () я использую ax ios чтобы отправить запрос в мой бэкэнд с учетными данными пользователя. На бэкэнде логи не показывают записи о получении запроса. Следовательно, ошибка должна возникать до отправки запроса. Но мне нужен способ подавления повторного рендеринга страницы, чтобы я мог видеть сообщение об ошибке.

Большое спасибо.

Answer 1

Измените подпись signin, чтобы принять событие отправки формы, вам нужно запретить действие по умолчанию для него. Это удерживает страницу от перезагрузки.

signin(e) {
  e.preventDefault();
  ...

Answer 2

Если я не ошибаюсь, ax ios сделает http-запрос асинхронным, поэтому вам, возможно, придется использовать event.persist () , если это не так, предотвращениеDefault () должно работать как они упоминали в ответах выше, также рекомендуется вызывать API в componentDidMount ()

Answer 3

Ошибка говорит о том, что ссылка из компонента еще не определена. Поскольку метод не привязан к this при использовании в качестве функции:

 <form onSubmit={e => this.signin(e)}>

, а затем поместите e.preventDefault() внутрь signin(e), что предотвращает мигание после отправки формы.