Блог

У меня есть форма входа в систему React. Проблема в том, что отправка формы вызывается два раза. Я этого не понимаю. Кто-нибудь может сказать мне, пожалуйста, почему? Большое спасибо.

 import React from "react"
import LoginErrors from "./LoginErrors"
import LoginSuccess from "./LoginSuccess"
import axios from 'axios'
import { withRouter } from "react-router-dom";


class Login extends React.Component
{

    constructor(props)
    {
        super(props)

        this.state = {
            name: '',
            password: '',
            errors: [],
            success: []
        }
    }

    changeName = e =>
    {
        this.setState({name: e.target.value});
    }

    changePassword = e =>
    {
        this.setState({password: e.target.value});
    }

    sendData(e)
    {
        e.preventDefault();
        this.setState({'errors': [], 'success': []});

        let formData = new FormData();
        formData.set('name', this.state.name);
        formData.set('password', this.state.password);

        axios({
            method: 'POST',
            url: 'http://localhost:8000/login',
            data: formData,
            headers: {
                'Content-Type': 'text/html',
                'X-Requested-With': 'XMLHttpRequest',
            }
        })
            .then(response => {
                // ? returns undefined if variable is undefined
                if( response.data?.errors?.length )
                {
                    this.setState({errors: response.data.errors})
                }
                if( response.data?.success?.length )
                {
                    let data = response.data
                    this.props.setAccessToken(data.token)
                    this.props.setUserName(data.user.name)
                    this.props.history.push('/')
                }
            })
            .catch(response => {
                this.setState({errors: ['Login fails. Try it again later please.']})
            });
    }

    render() {
        return (
            <div className="row justify-content-md-center">
                <div className="col-sm-12 col-md-6">
                    <div id="loginForm">
                        <h2 className="">Login</h2>

                        <LoginSuccess success={this.state.success} />
                        <LoginErrors errors={this.state.errors} sendParentMessage={this.handleErrorsChildMessage} />

                        <form onSubmit={e => {this.sendData(e)}}>
                            <div className="form-group">
                                <label htmlFor="name">Name</label>
                                <input ref={this.email} name="name" className="form-control" type="text" onChange={this.changeName} />
                            </div>
                            <div className="form-group">
                                <label htmlFor="password">Heslo</label>
                                <input ref={this.password} name="password" className="form-control" type="password" onChange={this.changePassword} />
                            </div>
                            <div className="form-group">
                                <button name="sbmt" className="btn btn-primary" type="submit">Odoslať</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        );
    }
}
  

Итак, проблема заключается в предварительном запросе axios, который связан с политикой CORS. Но как это остановить?