Javascript 当按下注册按钮时，注册表表单会在一瞬间重新呈现

我有一个注册页面，我正在构建，当你提交表单时，表单会在屏幕底部重新提交一秒钟，然后再进入注册过程的下一步。我已经重写了好几次，而且一直在发生。我不明白为什么这个问题一再发生

提前感谢大家提供的所有帮助。希望你们都有一个伟大的一天和快乐的编码

//Signup.jsx
            import React, { Component } from 'react'
            import { Link } from 'react-router-dom'
            import axios from 'axios'
            // import Swal from 'sweetalert2'
            import { signUpThroughFirebase } from '../../firebase/firebase.utils.js'
            import './Signup.scss'
            import passwordReveal from '../../assets/eye-solid.svg'
            import google from '../../assets/google.svg';
            import facebook from '../../assets/facebook.svg';
            import { UserContext } from '../../contexts/UserContext.js'

            // check to see if email is valid
            const validEmailRegex = RegExp(/^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i);

            const validateForm = errors => {
                let valid = true;
                // check to see if any errors exist, otherwise form is invalid
                Object.values(errors).forEach(error => {
                    error.length > 0 && (valid = false)
                });
                return valid;
            }

            export default class Signup extends Component {
                state = {
                    credentials: {
                        id: '',
                        email: '',
                        password: '',
                        passwordCheck: '',
                        tosCheck: false
                    },
                    errors: {
                        email: '',
                        password: '',
                        passwordCheck: '',
                        tosCheck: ''
                    },
                    passwordReveal: false,
                    passwordConfirmReveal: false
                }

                toggleReveal = (e, which) => {
                    if(which) this.setState({...this.state, passwordConfirmReveal: !this.state.passwordConfirmReveal});
                    else this.setState({ ...this.state, passwordReveal: !this.state.passwordReveal});
                }

                handleChange = e => {
                    let { name, value, checked } = e.target;
                    let errors = this.state.errors;

                    // handle input validation here
                    switch(name) {
                        case 'email' :
                            if (!value.length) errors.email = 'email is a required field';
                            else if (validEmailRegex.test(value) === false) errors.email = 'email must be a valid email';
                            else errors.email = '';
                            break;
                        case 'password' :
                            if (!value.length) errors.password = 'password is a required field';
                            else if (value.length < 8) errors.password = 'password must be at least 8 characters';
                            else errors.password = '';
                            break;
                        case 'passwordCheck' :
                            if (this.state.credentials.password !== value) errors.passwordCheck = 'passwords do not match';
                            else errors.passwordCheck = '';
                            break;
                        case 'tosCheck' :
                            if (!checked) {
                                value = false;
                                errors.tosCheck = 'terms and conditions must be accepted to continue';
                            } else {
                                value = true;
                                errors.tosCheck = '';
                            };
                            break;
                        default :
                            break;
                    }

                    this.setState({
                        errors,
                        credentials: {
                            ...this.state.credentials,
                            [name]: value
                        }
                    })
                    // console.log(this.state.credentials)
                }

                onSubmit = e => {
                    e.preventDefault()
                    const { email, password, passwordCheck, tosCheck } = this.state.credentials
                    const user = { email: this.state.credentials.email, password: this.state.credentials.password }
                    //if no error exists, make the request to the backend
                    if (email && password && passwordCheck && tosCheck && validateForm(this.state.errors)) {
                        axios
                        .post('https://infinite-meadow-87721.herokuapp.com/auth/register', user)
                        .then(res => {
                            this.setState({
                                ...this.state,
                                credentials: {
                                    ...this.state.credentials,
                                    id: res.data._id 
                                }
                            })
                            this.props.history.push('/account')
                        })
                        .catch(err => console.log(err))
                    } else {
                        console.log('x')
                    }
                }

                render() {
                    return (
                        <UserContext.Consumer>
                            {props => {
                                if(this.state.credentials.id !== '') {
                                    props.setLoggedInUser(this.state.credentials); 
                                }
                                // console.log(props);

                                return (
                                <div className='sign-up-page-container'>
                                    <h1 className='sign-up-header'>SIGN UP</h1>

                                    <div className='sign-up-forms'>
                                        <form onSubmit={this.onSubmit} className='sign-up-email' noValidate>
                                            <label className='form-input-label'>
                                                EMAIL
                                                <input
                                                    type='email'
                                                    name='email'
                                                    // placeholder='E-mail'
                                                    value={this.state.credentials.email}
                                                    onChange={this.handleChange}
                                                    className='form-input'
                                                    required
                                                />
                                            </label>
                                            <p className='form-input-error'>{this.state.errors.email}</p>

                                            <label className='form-input-label'>
                                                PASSWORD

                                                <div className='password-container'>
                                                    <input
                                                        type={this.state.passwordReveal ? 'text' : 'password'}
                                                        name='password'
                                                        // placeholder='Password'
                                                        value={this.state.credentials.password}
                                                        onChange={this.handleChange}
                                                        required
                                                        className='form-input'
                                                    />
                                                    <img className='password-toggle' src={passwordReveal} alt='toggle password' onClick={(e) => this.toggleReveal(e, 0)} />
                                                </div>
                                            </label>
                                            <p className='form-input-error'>{this.state.errors.password}</p>

                                            <label className='form-input-label'>
                                                CONFIRM PASSWORD
                                                <div className='password-container'>
                                                    <input
                                                        type={this.state.passwordConfirmReveal ? 'text' : 'password'}
                                                        name='passwordCheck'
                                                        // placeholder='Retype password'
                                                        value={this.state.credentials.passwordCheck}
                                                        onChange={this.handleChange}
                                                        required
                                                        className='form-input'
                                                    />
                                                    <img className='password-toggle' src={passwordReveal} alt='toggle password' onClick={(e) => this.toggleReveal(e, 1)} />
                                                </div>
                                            </label>
                                            <p className='form-input-error'>{this.state.errors.passwordCheck}</p>

                                            <div className='tos'>
                                                <input type='checkbox' name='tosCheck' id='tosCheck' value={this.state.credentials.tosCheck} onChange={this.handleChange}/>
                                                <label for='tosCheck' className='tos-text'>I agree to the <a href='google.com' className='tos-text-link'>Terms and Conditions</a></label>
                                            </div>
                                            <p className='form-input-error'>{this.state.errors.tosCheck}</p>

                                            <button
                                                className='sign-up-button'
                                                type='submit'
                                                name='signup_submit'
                                            >
                                                SIGN UP
                                            </button>

                                            <div className='sign-up-automatic mobile'>
                                                <div className='firebase-buttons mobile'>
                                                    <button onClick={() => signUpThroughFirebase('google', this.props.history)} className='social-sign-in google'>
                                                        <img className='button-img' src={google} alt='sign up with google' /> SIGN IN WITH GOOGLE
                                                    </button>

                                                    <button onClick={() => signUpThroughFirebase('facebook', this.props.history)} className='social-sign-in facebook'>
                                                        <img className='button-img' src={facebook} alt='sign up with facebook' /> SIGN IN WITH FACEBOOK
                                                    </button>
                                                </div>
                                            </div>

                                            <Link to='/Signin' className='sign-in-redirect'>I already have an account</Link>
                                        </form>

                                        <h2 className='sign-up-or'>OR</h2>

                                        <div className='sign-up-automatic'>
                                            <div className='firebase-buttons'>
                                                <button onClick={() => signUpThroughFirebase('google', this.props.history)} className='social-sign-in google'>
                                                    <img className='button-img' src={google} alt='sign up with google' /> SIGN IN WITH GOOGLE
                                                </button>

                                                <button onClick={() => signUpThroughFirebase('facebook', this.props.history)} className='social-sign-in facebook'>
                                                    <img className='button-img' src={facebook} alt='sign up with facebook' /> SIGN IN WITH FACEBOOK
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    </div>
                                    )
                                }}

                            </UserContext.Consumer>
                        )
                    }
                }

//Signup.jsx
从“React”导入React，{Component}
从“react router dom”导入{Link}
从“axios”导入axios
//从“sweetalert2”导入Swal
从“../../firebase/firebase.utils.js”导入{signUpThroughFirebase}
导入“./Signup.scss”
从“../../assets/eye solid.svg”导入passwordReveal
从“../../assets/google.svg”导入google；
从“../../assets/facebook.svg”导入facebook；
从“../../contexts/UserContext.js”导入{UserContext}
//检查电子邮件是否有效
const validEmailRegex=RegExp（/^（[^（）\[\]\，；：\s@\“]+（\[^（）\[\]\，；：\s@\“]+）*）（[^（）[\]\，；：\s@\']+\）+（[^（）[\]\，：\s@\']++++[^（）[\]\，；：\s@\']]/{2，}$/i）；
const validateForm=错误=>{
让valid=true；
//检查是否存在任何错误，否则表单无效
Object.values（errors）.forEach（error=>{
error.length>0&（valid=false）
});
返回有效；
}
导出默认类注册扩展组件{
状态={
证书：{
id:“”，
电子邮件：“”，
密码：“”，
密码检查：“”，
tosCheck:错误
},
错误：{
电子邮件：“”，
密码：“”，
密码检查：“”，
ToCheck:“”
},
密码：false，
passwordConfirmReveal:false
}
toggleReveal=（e，其中）=>{
if（which）this.setState（{…this.state，passwordconfirmleave:！this.state.passwordconfirmleave}）；
else this.setState（{…this.state，passwordReveal:！this.state.passwordReveal}）；
}
handleChange=e=>{
设{name，value，checked}=e.target；
让errors=this.state.errors；
//在这里处理输入验证
交换机（名称）{
“电子邮件”案例：
如果（！value.length）errors.email='电子邮件是必填字段'；
else if（validEmailRegex.test（value）==false）errors.email='电子邮件必须是有效的电子邮件'；
else errors.email=''；
打破
案例“密码”：
如果（！value.length）errors.password='密码是必填字段'；
else if（value.length<8）errors.password='密码必须至少包含8个字符'；
else错误。密码=“”；
打破
大小写“密码检查”：
如果（this.state.credentials.password！==值）错误。密码检查='密码不匹配'；
else errors.passwordCheck=''；
打破
“tosCheck”案例：
如果（！选中）{
值=假；
errors.tosCheck='必须接受条款和条件才能继续'；
}否则{
值=真；
errors.tosCheck=''；
};
打破
违约：
打破
}
这是我的国家({
错误，
证书：{
…此.state.credentials，
[名称]：值
}
})
//console.log（this.state.credentials）
}
onSubmit=e=>{
e、 预防默认值（）
const{email，passwordCheck，tosCheck}=this.state.credentials
const user={email:this.state.credentials.email，密码：this.state.credentials.password}
//如果不存在错误，请向后端发出请求
if（email&&password&&passwordCheck&&tosCheck&&validateForm（this.state.errors））{
axios
.post（'https://infinite-meadow-87721.herokuapp.com/auth/register，用户）
。然后（res=>{
这是我的国家({
…这个州，
证书：{
…此.state.credentials，
id:res.data.\u id
}
})
this.props.history.push（“/account”）
})
.catch（err=>console.log（err））
}否则{
console.log（'x'）
}
}
render（）{
返回(
{props=>{
如果（this.state.crede
this.setState((state) => {
  return {...state, other: 'prarams'};
});