React SQL 插入问题

Question

我正在尝试使用 phpmyadmin 数据库（mysql）进行基本的注册连接express/axios。 我已经创建了前端并将其链接到服务器。一切似乎都正常，但由于某种原因，我的数据没有发布（插入）到表中。

Console.log 显示数据为空。 我已经为此研究了 2 天，但似乎仍然不明白我在哪里犯了错误，或者为什么它连接不正确。

在尝试解决问题时，我们将不胜感激：

服务器.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];
    // Using a parameterized query to prevent SQL injection
    const sql = "INSERT INTO `login`(`name`, `email`, `password`) VALUES (?, ?, ?)";
    
    
    db.query(sql, values, (err, data) => {
        if (err) {
            console.error(err);
            return res.json({ error: 'An error occurred' });
        }
        
        console.log(data);
        return res.json({ success: true, data: data });
    });
});

app.listen(8081, () => {
    console.log('Server is listening on port 8081');
});

控制台报错：

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> Sign Up</h2>
    <div className='mb-3'>
        <label htmlFor='name'><strong>Name</strong></label>
        <input type='text' placeholder='Enter Name' 
        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>Email</strong></label>
        <input type='email' placeholder='Enter Email' 
        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>Password</strong></label>
        <input type='password' placeholder='Enter Password' 
        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>Log in</strong></button></a> */}
    <p> Agree to our policy</p>

    <button type='submit' className='btn btn-success w-100'><strong>Sign in</strong></button>
    {/* <Link to="/" className='btn btn-success w-100'>
        <button type='submit'>Sign Up</button>
      </Link> */}
      <Link to="/login" className='btn btn-deafult border w-100'>
        <button>Login in</button>
      </Link>

    
</form>

Answer 1

您没有设置输入元素的

value

属性，因此

e.target.value

为空，请按如下方式更新所有输入元素：

<input 
        type='text' 
        placeholder='Enter Name' 
        onChange={handleInput} 
        className='form-control rounded-0' 
        name='name' 
        value={values.name}
/>

也是它

e.target.value

而不是

e.target.values