Запрос на вставку MySQL выполнен успешно, но не вставляется в таблицу базы данных

Я работаю над страницей регистрации 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)

На вкладке сети я вижу это:

Редактировать 2

Раздел ответа на ошибку Axios гласит следующее:

🤔 А знаете ли вы, что...
JavaScript обеспечивает обработку ошибок с использованием конструкции try...catch.


88
2

Ответы:

попробуй это

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);
});

Решено

Оказывается, моей проблемой был сервер MAMP. После перехода на XAMPP мне удалось записать данные формы в базу данных.


Интересные вопросы для изучения

Как искать несколько строк с помощью AND, используя JS-фильтр в реакции?Расшифровка JavaScript Web Crypto API (RSA-OAEP) в JavaМожно ли добавить прослушиватель событий в пользовательскую строку заголовка, используемую для перетаскивания окна в безрамочном окне?Реакция: «.map не является функцией»Обновление документа Firestore несколько раз с помощью функции триггера события перезаписывает или прекращает обновление после нескольких триггеровИспользование ключевого слова TABLE для ВЫБРАТЬ все из и SELECT * из table_nameMySQL JSON_OBJECTAGG — Как исправить ошибку «PDOException: SQLSTATE[22032]: <>: 3158 JSON-документы могут не содержать NULL-имена элементов»?Измените строку из одного столбца перед вставкой в ​​другойВыполнение различных функций агрегирования для разных строк выходных данных, возвращаемых предложением group byПОЛНОЕ ВНЕШНЕЕ СОЕДИНЕНИЕ НА ДВУХ ТАБЛИЦАХ MYSQL С 3 СВЯЗАННЫМИ КОЛОННАМИ