前端与后端连接错误

Question

我正在尝试注册页面并将其连接到数据库，但是当我按下登录按钮时出现此错误...

"Uncaught (in promise) TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'HTMLButtonElement'
    |     property '__reactFiber$ww3s8q1oske' -> object with constructor 'FiberNode'
    --- property 'stateNode' closes the circle
    at JSON.stringify (<anonymous>)
    at transformRequest (defaults.js:52)
    at transform (transformData.js:16)
    at Object.forEach (utils.js:247)
    at transformData (transformData.js:15)
    at dispatchRequest (dispatchRequest.js:30)"

我的代码： 反应

"const onSignUp=(name,adress,email,password,phone)=>{
    axios.post(`http://localhost:5000/register/${role}`,{name,adress,email,password,phone})
        .then((response)=>{
            console.log("done")
        })
        .catch((err)=>{throw err})
}"

后端

"const query =`INSERT INTO users (name,adress,email,password,phone,role_id) VALUES(?,?,?,?,?,?)`
     const data=[name,adress,email,hashPassword,phone,role_id]
     connection.query(query,data,(err,result)=>{if(err) throw err});"

是我在 axios 中的错误吗？？

编辑：我尝试使用邮递员完成工作，它工作正常，我也停止了服务器并按下按钮，我得到了同样的错误，这意味着我在 React 代码中的错误......

这是我的反应代码：

import React,{useState} from 'react'
import logo from './pics/logo.png'
import axios from 'axios'

const Register = () => {

const [userName,setuserName]=useState('')
const [email,setemail]=useState('')
const [password,setpassword]=useState('')
const [confPassword,setconfPassword]=useState('')
const [phone,setphone]=useState('')
const [adress,setadress]=useState('')
const [role,setrole]=useState('')

const userHandler=(e)=>{
    setuserName(e.target.value);
    let name =userName
}
const emailHandler=(e)=>{
    setemail(e.target.value)
}
const passHandler=(e)=>{
    setpassword(e.target.value)
}
const confPassHandler=(e)=>{
    setconfPassword(e.target.value)
}
const phoneHandler=(e)=>{
    setphone(e.target.value)
}
const adressHandler=(e)=>{
    setadress(e.target.value)
}
const roleHandler=()=>{
    setrole("instructor")
}
const onSignUp=(name,adress,email,password,phone)=>{
    axios.post(`http://localhost:5000/register/${role}`,{name,adress,email,password,phone})
        .then((response)=>{
            console.log("done")
        })
        .catch((err)=>{throw err})
}

    return (
        <div className="registerCont">
            <div className="register">
                <div className="registerLogo">
                    <img src={logo} alt=""></img>
                    <p>Sign Up as student or Instructor</p>
                </div>
                <div className="s-border"></div>
                <div className="inputs">
                    <input placeholder="User Name" name="text" onChange={userHandler} required/>

                    <input placeholder="Email" name="email" onChange={emailHandler} required/>

                    <input placeholder="Password" name="password" type="password" onChange={passHandler} required/>

                    <input placeholder="Confirm Password" name="password" type="password" onChange={confPassHandler} required/>

                    <input placeholder="Phone Number" name="number" type="number" onChange={phoneHandler} required/>

                    <input placeholder="Adress" name="text" onChange={adressHandler} required/>
                </div>
                <div className="check">
                            <input type="checkbox" name="" onClick={roleHandler} ></input>
                            <label > Register as a Instructor</label>
                        </div>
                <div className="signup">
                    <button onClick={onSignUp}>Sign Up</button>
                    <p>By signing up, you agree to our Terms , Data Policy and Cookies Policy . </p>
                </div>
            
            </div>
            <div className="is-sign">
                <p>Have an account?</p><a href="http://localhost:3000/login">Log In</a>
            </div>   
        </div>
        
    )
}

export default Register

Answer 1

您是否有机会在请求中发送一个数组？

Answer 2

通过改变这个来解决：

<button onClick={onSignUp}>Sign Up</button>

到：

<button onClick={()=>{onSignUp(userName,email,adress,password,phone,passErr)}}>Sign Up</button>