求助：Node.js Express+MySQL用户注册认证，React端res未定义问题

核心错误点及修复 #

1. 未接收Axios响应导致res未定义
   你在await axios.post后直接调用console.log(res)，但从未将响应赋值给res变量，这是报错的直接原因。需要先接收响应，再打印自定义提示。

2. Axios导入语法错误
   原代码中axios from "axios"缺少import关键字，会导致axios未定义。

3. 错误处理属性名错误
   err. Response里的属性名多了空格，正确写法是err.response，通常我们会取响应内的错误信息或直接用err.message。

4. 按钮标签语法错误
   原按钮代码缺少<包裹，且onClick的值未加{}，导致点击事件无法触发。

修复后的完整React代码 #

import React from 'react'
import { Link } from 'react-router-dom'
import { useNavigate } from 'react-router-dom';
import { useState } from 'react'
import axios from "axios"

const Register = () => {
  const [inputs, setInputs] = useState({
    username: "",
    email: "",
    password: "",
  })

  const [err, setError] = useState(null)
  const navigate = useNavigate()

  const handleChange = e => {
    setInputs(prev => ({...prev, [e.target.name]: e.target.value}))
  }

  const handleSubmit = async e => {
    e.preventDefault()
    try{
      // 接收Axios返回的响应
      const res = await axios.post("http://localhost:8800/API/auth/register", inputs)
      // 打印要求的提示信息
      console.log("用户已创建")
      // 可选：如需查看响应详情可保留
      // console.log(res.data)
      // navigate("/login")
    }catch(err) {
      console.log(err)
      // 适配不同错误场景的信息获取
      setError(err.response?.data?.message || err.message)
    }
  }

  return (
    <div className="auth">
      <h1>Register</h1>
      <form className="registerForm" onSubmit={handleSubmit}>
        <input type="text" placeholder="username" required name="username" onChange={handleChange}/>
        <input type="email" placeholder="email" required name="email" onChange={handleChange}/>
        <input type="password" placeholder="password" required name="password" onChange={handleChange}/>
        <button type="submit" className="registerBtn"> Register</button>
        {err && <p>{err}</p>}
        <span>Already have an account? <Link to="/login"> Login</Link></span>
      </form>
    </div>
  )
}

export default Register

额外注意事项 #

• 确保你的Express后端/API/auth/register接口能正确接收username、email、password参数，并将数据插入MySQL的users表中。
• 后端需返回合适的响应状态码（如201表示创建成功），错误场景下也要返回对应错误信息，保证前端能正确处理。

内容的提问来源于stack exchange，提问作者Zubi