Javascript Reactjs和node JS中出现错误（无法在呈现页面时发布）

我正在为我的项目构建注册页面，在呈现网页时遇到错误无法发布/。之前我还创建了一个登录页面，该页面使用几乎相同的语法正常工作。这是我的档案

1）Registration.js

import React,{Component} from 'react';
import Axios from 'axios';

class Registration extends Component{
    constructor(props)
    {
        super(props);
    this.state={
        name:"",
        gender:"",
        city:"",
        state:"",
        email:"",
        password:""
    };
}
    render(){
        
        return(
            <div class="main">

        <h1>Sign up</h1>
        <div className="container">
            <div className="sign-up-content">
                <form method="POST" class="signup-form" onSubmit={this.onSubmit}>
                    <h2 className="form-title">Register yourself below:-</h2>
                    <div className="form-textbox">
                        <label for="name">Full name</label>
                        <input type="text" name="name" id="name" value={this.state.name} onChange={this.onChangeName}/>
                    </div>
                    
                    <div className="form-textbox">
                        <label for="Gender">Gender</label>
                        <input type="text" name="gender" id="gender" value={this.state.gender} onChange={this.onChangeGender}/>
                    </div>

                    <div className="form-textbox">
                        <label for="City">City</label>
                        <input type="text" name="city" id="city" value={this.state.city} onChange={this.onChangeCity}/>
                    </div>

                    <div className="form-textbox">
                        <label for="State">State</label>
                        <input type="text" name="State" id="State" value={this.state.state} onChange={this.onChangeSate}/>
                    </div>
                    
                    <div className="form-textbox">
                        <label for="email">Email</label>
                        <input type="email" name="email" id="email" value={this.state.email} onChange={this.onChangeEmail}/>
                    </div>

                    <div className="form-textbox">
                        <label for="pass">Password</label>
                        <input type="password" name="pass" id="pass" value={this.state.password} onChange={this.onChangePassword}/>
                    </div>

                    {/* <div className="form-group">
                        <input type="checkbox" name="agree-term" id="agree-term" class="agree-term" />
                        <label for="agree-term" class="label-agree-term"><span><span></span></span>I agree all statements in  <a href="#" class="term-service">Terms of service</a></label>
                    </div> */}

                    <div className="form-textbox">
                        <input type="submit" name="submit" id="submit" class="submit" value="Create account" />
                    </div>
                </form>

                <p className="loginhere">
                    Already have an account ?<a href="#" class="loginhere-link"> Log in</a>
                </p>
            </div>
        </div>

    </div>
        );
    };
    onChangeName=(e)=>{
        this.setState({
            name:e.target.value 
        });
    };
    onChangeGender=(e)=>{
        this.setState({
            gender:e.target.value
        });
    };
    onChangeCity=(e)=>{
        this.setState({
            city: e.target.value
        });
    };
    onChangeSate=(e)=>{
        this.setState({
            state:e.target.value
        });
    };
    onChangeEmail=(e)=>{
        this.setState({
            email:e.target.value
        });
    };
    onChangePassword=(e)=>{
        this.setState({
            password:e.target.value
        });
    };
    onSubmit=(e)=>{
        console.log("inside on submit");
        const vals={...this.state};
        Axios.post("http://localhost:4200/register",vals).then(res=>console.log(res.data));
    };
}

export default Registration;

import React from 'react';
import Login from './Login';
import Registration from './Registration';
const App=()=>(
<Registration />
);

export default App;

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />,document.getElementById('root'));

const express=require('express');
const bodyParser=require('body-parser');
const mysql=require('mysql');
const cors=require('cors');


const app=express();

app.use(cors());
app.use(bodyParser.urlencoded({extended:true}));
app.use(bodyParser.json());

const con=mysql.createConnection({
    host:'localhost',
    user:'root',
    password:'root',
    database:'reactProject'
});

// app.post('/login',(request,resposne)=>{
//     const email=request.body.email; 
//     const password=request.body.password;
//     console.log(email+"   "+password)
//     const sql='select * from login where email = "'+email+'" and password="'+password+'" ';
//     con.query(sql,(err,result)=>{
//         if(result.length)
//         {
//             console.log(result);
//             console.log("signed in");
//         }
//         else{
//             console.log(result);
//             console.log("Not signed");
//         }
//     });
// });

app.post('/register',(request,resposne)=>{
    const name=request.body.name;
    const gender=request.body.gender;
    const city=request.body.city;
    const state=request.body.state;
    const email=request.body.email;
    const password=request.body.password;
    console.log(name+" "+gender);
    const sql=`insert into register(name,gender,city,state,email,password) values('${name}','${gender}','${city}','${state}','${email}','${password}')`;
    con.query(sql,(result,error)=>{
        console.log(result);
    });
});
app.listen(4200,()=>{
    console.log("Server at 4200");
});

---

上面的文件是server.js、App.js、index.js和Registration，可能是每当我单击submit时，它都不会进入submit函数。

在React中，当您创建一个自定义函数来处理表单提交时，您需要调用event.preventDefault（）。您遇到的问题是，当您提交表单时，您的HTML试图发送post请求，而您尚未将其设置为发送post请求

下面是一个类似的问题，您可以在其中找到更详细的信息：

因此，解决此问题的一种方法是将onSubmit函数更改为如下内容：

onSubmit=(e)=>{
    console.log("inside on submit");
    e.preventDefault();
    const vals={...this.state};
    Axios.post("http://localhost:4200/register",vals).then(res=>console.log(res.data));
};

---

那么为什么我的login.js没有event.preventDefault（）？我无法告诉您，因为您的登录组件的代码没有发布在这里。我的第一个猜测是，在该组件上，您的登录按钮不在表单中，或者您没有为按钮提供提交值，但这只是一个猜测。不管怎样，添加默认值是否解决了您的问题？