反应表单提交触发器两次

问题描述

我有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>
        );
    }
}

因此问题出在与CORS政策相关的axios preflyght请求中。但是如何阻止它？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）