Почему не передаются данные из формы jsx в базу данных mysql???

Question

[Александр Кузнецов]

// ./frontend/Login.jsx

import React, { useState } from 'react';
import axios from 'axios';

function Login() {
	const [name, setName] = useState('');
	const [email, setEmail] = useState('');
	const [password, setPassword] = useState('');

	const handleSubmit = (event) => {
		event.preventDefault();
		axios.post('http://localhost:8081/login', {name, email, password})
		.then(res => console.log(res))
		.catch(err => console.error(err));
	}
	return (
		<div>
			<form onSubmit={handleSubmit}>
				<div>
					<label htmlFor='name'>Name</label>
					<input required onChange={e => setName(e.target.value)} type='text' placeholder='Enter name' />
				</div>
				<div>
					<label htmlFor='email'>Email</label>
					<input required onChange={e => setEmail(e.target.value)} type='text' placeholder='Enter name' />
				</div>
				<div>
					<label htmlFor='password'>Password</label>
					<input required onChange={e => setPassword(e.target.value)} type='password' placeholder='Enter name' />
				</div>
				<button type='submit'>Login</button>
			</form>
		</div>
	);
}

export default Login;

// ./backend/server.js

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

const app = express();
app.use(express.json());
app.use(cors());
const db = mysql.createConnection({
	host: 'localhost',
	user: 'root',
	password: 'sho0O-a+z1#Lpd(./y%f',
	database: 'login',
});

app.post('/login', (req, res) => {
	const sql = `INSERT INTO users (user_id, name, email, password_hash) VALUES (444435346,'Hello','[e-mail]', qwerty12345);`;
	const values = [req.body.name, req.body.email, req.body.password];
	db.query(sql, [values], (error, data) => {
		if (error) {
			return res.json('Error!');
		}
		if (data.length > 0) {
			return res.json('Login success!');
		} else {
			return res.json('No record!');
		}
	});
});

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

Comments

[Kentavr16]

ошибки? что приходит на бекенд?

[Александр Кузнецов]

Kentavr16, {data: 'Error!', status: 200, statusText: 'OK', headers: AxiosHeaders, config: {…}, …}

[Александр Кузнецов]

Kentavr16, [nodemon] restarting due to changes...
[nodemon] restarting due to changes...
[nodemon] starting `node server.js`
listening on 8081 port

[Kentavr16]

alexander_kuznecov, если интересно что пошло не так, смотри ошибку.

if (error) {
      console.error(error)//или error.message если читать неохота
      return res.json('Error!');
    }

попробуй это и смотри консоль

[Kentavr16]

скорее всего что-то не то не туда пытаешься вставить. Или айди автоинкремент, или что-то такое

[Kentavr16]

qwerty12345 без кавычек, хоть это и строка

[Kentavr16]

да и подготовленный запрос не так работает. Там кажется нужно что-то вроде

const sql = `INSERT INTO users (name, email, password_hash) VALUES (?, ?, ?)`;
  const values = [req.body.name, req.body.email, req.body.password];

db.query(sql, [values] зачем квадратные скобки?

[Александр Кузнецов]

Kentavr16,

AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}code: "ERR_NETWORK"config: {transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}message: "Network Error"name: "AxiosError"request: XMLHttpRequest {requestMethod: 'POST', readyState: 4, timeout: 0, withCredentials: false, onreadystatechange: ƒ, …}stack: "AxiosError: Network Error\n at XMLHttpRequest.handleError (localhost:3000/static/js/bundle.js:41414:14)"[[Prototype]]: Error