React+Express+MySQL注册数据无法插入数据库求助

我正在搭建基于React前端、Express后端、MySQL（phpMyAdmin管理）的基础注册功能，已完成前端开发并与后端建立连接，但数据始终无法插入数据库表中。控制台显示传递的数据为null，排查两天仍未找到问题，恳请协助解决。

后端server.js代码 #

const express = require('express');
const mysql = require('mysql');
const cors = require('cors');

const app = express();
app.use(cors());
app.use(express.json());

const db = mysql.createConnection({
    host: "localhost",
    user: "root",
    password: "",
    database: "signup"
});

app.post('/signup', (req, res) => {

    const values = [req.body.name, req.body.email, req.body.password];
    // 使用参数化查询防止SQL注入
    const sql = "INSERT INTO `login`(`name`, `email`, `password`) VALUES (?, ?, ?)";
    
    
    db.query(sql, values, (err, data) => {
        if (err) {
            console.error(err);
            return res.json({ error: '发生错误' });
        }
        
        console.log(data);
        return res.json({ success: true, data: data });
    });
});

app.listen(8081, () => {
    console.log('服务器在8081端口监听');
});

控制台报错截图：

前端Signup组件代码 #

function Signup(){

    const [values, setValues] = useState({
        name:'',
        email:'',
        password:''
    })

    const Navigate = useNavigate();
    const [errors, setErrors] = useState({})

    const handleInput = (e) =>{
        setValues(prev => ({...prev, [e.target.name]: [e.target.values]}))
        
    }
    const handleSubmit = (e) =>{
        e.preventDefault();
        const err = Validation(values);
        setErrors(err);
        if(err.name=== "" && err.email=== "" && err.password=== ""){
            axios.post('http://localhost:8081/signup', values)
            .then(res => console.log(res))
                
            //     {
            //     Navigate('/');
            // })
            .catch(err => console.log(err));

        }
    }

    return(
        <div className='d-flex justify-content-center align-items-center bg-primary vh-100'>
            <div className='bg-white p-3 rounded w-25'>

<form action="" onSubmit={handleSubmit}>
    <h2> 注册</h2>
    <div className='mb-3'>
        <label htmlFor='name'><strong>姓名</strong></label>
        <input type='text' placeholder='输入姓名' 
        onChange={handleInput} className='form-control rounded-0' name='name'/>
         {errors.name && <span className='text-danger'> {errors.name}</span>}
    </div>
    <div className='mb-3'>
        <label htmlFor='email'><strong>邮箱</strong></label>
        <input type='email' placeholder='输入邮箱' 
        onChange={handleInput} className='form-control rounded-0' name='email'/>
         {errors.email && <span className='text-danger'> {errors.email}</span>}
    </div>

    <div className='mb-3'>
        <label htmlFor='password'><strong>密码</strong></label>
        <input type='password' placeholder='输入密码' 
        onChange={handleInput} className='form-control rounded-0' name='password'/>
        {errors.password && <span className='text-danger'> {errors.password}</span>}
    </div>
    {/* <a href='/Home'><button className='btn btn-success w-100'><strong>登录</strong></button></a> */}
    <p> 同意我们的条款</p>

    <button type='submit' className='btn btn-success w-100'><strong>注册</strong></button>
    {/* <Link to="/" className='btn btn-success w-100'>
        <button type='submit'>注册</button>
      </Link> */}
      <Link to="/login" className='btn btn-deafult border w-100'>
        <button>登录</button>
      </Link>

    
</form>
</div>
</div>
    )
}

核心问题出在前端handleInput函数的赋值错误：

• 代码中写了[e.target.values]，正确写法是e.target.value（注意是单数value，且不需要用方括号包裹）
• 错误赋值导致values中的每个字段都是数组类型而非字符串，后端无法正确解析，最终接收数据为null

修改后的handleInput函数：

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

额外检查建议：

1. 确认Validation函数能正确校验字段，避免空值提交
2. 后端可添加日志打印接收的请求体，验证数据格式：

app.post('/signup', (req, res) => {
    console.log('接收的数据:', req.body); // 新增日志
    const values = [req.body.name, req.body.email, req.body.password];
    // 其余代码不变
});

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