Я работаю над страницей регистрации React/MySQL. Запрос на вставку выполняется, но не вставляется в таблицу базы данных. Я не уверен, почему.
В внутренней папке у меня есть файл 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: "my_db",
});
app.post("/signup", (req, res) => {
const sql = "INSERT INTO login (`name`, `email`, `password`) VALUES (?)";
const values = [req.body.name, req.body.email, req.body.password];
db.query(sql, [values], (err, data) => {
if (err) return res.json(err);
return res.json(data);
});
});
app.listen(8081, () => {
console.info("Listening...");
});
В моей папке внешнего интерфейса есть App.js, который выглядит следующим образом:
import React from "react";
import SignUp from "./SignUp";
function App() {
return <SignUp></SignUp>;
}
export default App;
И затем мой файл SignUp.js:
import React, { useState } from "react";
import axios from "axios";
function SignUp() {
const [values, setValues] = useState({
name: "",
email: "",
password: "",
});
const handleChangeEvent = (event) => {
setValues({ ...values, [event.target.name]: [event.target.value] });
};
const handleSubmit = (event) => {
event.preventDefault();
axios
.post("http://localhost:8081/signup", values)
.then((res) => console.info("Registered Successfully"))
.catch((err) => console.info(err));
};
return (
<form onSubmit = {handleSubmit}>
<input
type = "text"
placeholder = "Enter Name"
name = "name"
className = "form-control rounded-0"
onChange = {handleChangeEvent}
/>
// 2 more inputs for email and password
</form>
);
}
export default SignUp;
NPM start используется для запуска бэкэнда и внешнего интерфейса.
Я использую сервер MAMP, на котором работает phpMyAdmin на локальном хосте: 8888.
Форма запущена и работает, и когда я ввожу имя, адрес электронной почты и пароль, на консоли появляется сообщение «Зарегистрировано успешно», но после обновления базы данных никакие записи не были вставлены.
Я понимаю, что запрос может быть успешно выполнен без вставки чего-либо, но в этом случае я не уверен, почему запрос не вставляется должным образом.
Что я сделал не так и как это исправить?
Я внес следующие изменения в server.js, как предложили Фил и МатБейли. в комментариях ниже:
app.post("/signup", (req, res) => {
const sql =
"INSERT INTO login (`name`, `email`, `password`) VALUES (?, ?, ?)";
const values = [req.body.name, req.body.email,
req.body.password];
db.query(sql, values, (err, data) => {
// if (err) return res.json(err);
// return res.json(data);
if (err) {
console.error("Error in signup", err);
return res.sendStatus(500);
}
});
});
Я получаю следующую ошибку Axios в консоли:
POST http://localhost:8081/signup 500 (Internal Server Error)
На вкладке сети я вижу это:
Раздел ответа на ошибку Axios гласит следующее:
🤔 А знаете ли вы, что...
JavaScript обеспечивает обработку ошибок с использованием конструкции try...catch.
попробуй это
const sql = "INSERT INTO login (`name`, `email`, `password`) VALUES (?, ?, ?)";
или
const sql = "INSERT INTO login SET ?";
db.query(sql, request.body, (err, data) => {
if (err) return res.json(err);
return res.json(data);
});