Javascript React组件正在重新加载时运行Fetch调用

当我导航到localhost:3000/signup时，注册组件将被装载，用户可以在表单中输入用户名、电子邮件和密码，然后表单将发送一个获取调用以创建新用户。现在，只要安装组件，就会运行这个获取调用。它应该只在用户单击“提交”时运行，因此是handleSubmit函数。在安装组件时，如何防止此操作运行？是什么导致了这个问题

以下是此组件的代码：

import React from 'react'
import { SignUpFetch } from '../fetchCalls/SignUpFetch'
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux' 

class SignUp extends React.Component {

    constructor(props) {
        super(props);
        this.state = {username: '', email: '', password: ''};
    }

    handleChange = (event) => {
        this.setState({
          [event.target.name]: event.target.value
        })
    }

    handleSubmit = event => {
        event.preventDefault()
        debugger
        SignUpFetch(this.state.username, this.state.email, this.state.password)
        this.setState({
            username: '', 
            email: '', 
            password: ''
        })

        this.props.history.push('/');
    }

    render() {
        return (
            <div className="SignUp">              
                <div className="sign-up-form-container">
                    <h1>Sign Up</h1>
                    <form onSubmit={this.handleSubmit}>
                        <p>
                        <b>Username</b>: <input type="text" name="username" onChange={(event) => this.handleChange(event)} value={this.state.username} />
                        <br/><br/>
                        <b>Email</b>: <input type="text" name="email" onChange={(event) => this.handleChange(event)} value={this.state.email} />
                        <br/><br/>
                        <b>Password</b>: <input type="text" name="password" onChange={(event) => this.handleChange(event)} value={this.state.password}/> 
                        <br/><br/>
                        </p>
                        <input type="submit" value="Sign Up!"></input>
                    </form>
                </div>
            </div>
        )
    }
}

const mapStateToProps = state => {
      return {
          user: state.user
      }
  }

export default withRouter(connect(mapStateToProps, SignUpFetch)(SignUp))

从“React”导入React
从“../fetchCalls/SignUpFetch”导入{SignUpFetch}
从“react router dom”导入{withRouter}；
从“react redux”导入{connect}
类注册扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={用户名：''，电子邮件：''，密码：'}；
}
handleChange=（事件）=>{
这是我的国家({
[event.target.name]：event.target.value
})
}
handleSubmit=事件=>{
event.preventDefault（）
调试器
SignUpFetch（this.state.username、this.state.email、this.state.password）
这是我的国家({
用户名：“”，
电子邮件：“”，
密码：“”
})
this.props.history.push（'/'）；
}
render（）{
返回(
注册

用户名：this.handleChange（event）}value={this.state.Username}/>



Email:this.handleChange（event）}value={this.state.Email}/>



密码：this.handleChange（event）}value={this.state.Password}/>




)
}
}
常量mapStateToProps=状态=>{
返回{
用户：state.user
}
}
使用路由器导出默认值（连接（MapStateTops，SignUpFetch）（注册））

你能制作代码snadbox吗。。对我来说，您的代码似乎很好……我猜，

SignUpFetch

是在render上调用的，因为它是作为第二个参数传递给react redux

connect

函数的。顺便说一下，这不是正确使用的。看看如何使用它。谢谢你们的帮助。在这种情况下，您建议我如何使用connect函数？您是否可以编写代码snadbox。。对我来说，您的代码似乎很好……我猜，

SignUpFetch

是在render上调用的，因为它是作为第二个参数传递给react redux

connect

函数的。顺便说一下，这不是正确使用的。看看如何使用它。谢谢你们的帮助。在这种情况下，您建议我如何使用connect函数？