Как отправить массив объектов в базу данных mysql (React, NodeJS)

Я новичок в базах данных NodeJS и Mysql. Я делаю небольшой проект в React с бэкэндом. Это недельный календарь, в котором студенты смогут бронировать уроки. Сейчас я делаю панель администратора, где учитель может создать недельный календарь с выбранными доступными часами. Все выбранные часы собраны в состояние, и выглядят они так:

[
{year: '2023', user_uuid: 2, dayId: 2, hourId: 0, hour: '7:00'}
{year: '2023', user_uuid: 2, dayId: 5, hourId: 0, hour: '7:00'}
{year: '2023', user_uuid: 2, dayId: 4, hourId: 0, hour: '7:00'}
{year: '2023', user_uuid: 2, dayId: 4, hourId: 1, hour: '7:45'}
etc.]

Что я пытаюсь сделать, так это отправить это состояние в мою таблицу в базе данных Mysql. Я создал бэкэнд в NodeJS, и он выглядит так:

(Код отредактирован с учетом предложений демонхолдена).

    const express = require("express");
    const mysql = require("mysql");
    const cors = require("cors")
    
    const app = express();
    
    const db = mysql.createConnection({
      host: "localhost",
      user: "root",
      password: "",
      database: "meetapp"
    }) 
    
    app.use(express.json())
    app.use(cors())
    
    app.get("/", (req, res) =>{
      res.json("hello this is the backend")
    })
    
    app.post("/terms", (req, res) => {
    const q =  "INSERT INTO terms (year, user_uuid, dayId, 
      hourId, hour) VALUES ?"
    
    const bulkValues = req.body.map((values) => [
      values.year,
      values.user_uuid,
      values.dayId,
      values.hourId,
      values.hour,
    ]);

  console.info('bulk is', bulkValues)

  db.query(q, [bulkValues], (err, data) => {
      if (err) return res.json(err)
      return res.json(data)
    })
    
    app.listen(8801, () => {
      console.info(`Backend works! Listening on 8801`);
    }); 

А это моя пост-функция в коде React:

const saveWeek = async e => {
    e.preventDefault()
    try {
        await axios.post("http://localhost:8801/terms", sortedTerms)
    } catch (err) {
        console.info(err)
    }
}

«sortedTerms» — это состояние со всеми собранными часовыми данными, о которых я упоминал выше. Когда я запускаю функцию onClick saveWeek, она отправляет все собранные данные в серверную часть. Журнал консоли в бэкэнде показывает следующее:

bulk is [
  [ '2023', 2, 0, 0, '7:00' ],
  [ '2023', 2, 1, 0, '7:00' ],
  [ '2023', 2, 2, 0, '7:00' ],
  [ '2023', 2, 3, 0, '7:00' ],
  [ '2023', 2, 3, 1, '7:45' ],
  [ '2023', 2, 3, 2, '8:30' ],
  [ '2023', 2, 6, 20, '22:00' ],
  [ '2023', 2, 5, 20, '22:00' ]
]

Обновлено: я использовал предложение демонхолдена, и теперь код работает нормально. Он сохраняет все данные в базу данных mysql. Надеюсь, это будет полезно для других разработчиков.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
73
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если вы отправляете весь массив в почтовом запросе, вам нужно будет указать позицию индекса в назначении values в вашем почтовом маршруте Express '/terms':

const values = [
  req.body[0].year,
  req.body[0].user_uuid,
  req.body[0].dayId,
  req.body[0].hourId,
  req.body[0].hour,
];

В качестве альтернативы просто отправьте один объект в запросе Axios:

axios.post('http://localhost:8801/terms', sortedTerms[0]);

Однако, если вы хотите выполнить массовую вставку всего массива, вам нужно будет сопоставить req.body с массивом массивов, где каждый подмассив содержит значения каждой записи, и присвоить массив values:

const bulkValues = req.body.map((values) => [
  values.year,
  values.user_uuid,
  values.dayId,
  values.hourId,
  values.hour,
]);

Надеюсь это поможет.

Спасибо за быстрый ответ. Это вроде как работает, прямо сейчас код сохраняет в моей базе данных первый объект в массиве (раньше я получал только null, теперь он сохраняет полный объект). Но как я могу сохранить все объекты? Один под другим?

MarcinB 14.01.2023 23:21

Я изменил ответ, чтобы учесть это.

damonholden 15.01.2023 00:01

Еще раз спасибо, Деймон, я думаю, что мы почти у цели :) Я исправил свой код, и прямо сейчас он отправляет все данные в серверную часть (журнал консоли видит данные), но они не сохраняются и не видны в базе данных mysql. Я отредактировал код выше, чтобы вы могли увидеть мой фактический код с вашими предложениями. Все еще чего-то не хватает? Может что-то с запросом db.query?

MarcinB 15.01.2023 19:35

Я исправил эту вставку ("ВСТАВИТЬ В термины (год, user_uuid, dayId, hourId, час) ЗНАЧЕНИЯ?"), и теперь все работает нормально. Данные сохраняются в базе данных mysql.

MarcinB 16.01.2023 15:04

рад, что вы разобрались. Рад был помочь.

damonholden 16.01.2023 17:27

Другие вопросы по теме

Похожие вопросы

Создание мегаменю с помощью react-bootstrap
Ошибка гидратации с использованием стилизованных компонентов и React Context
Как обновлять состояние каждую секунду в течение следующих n секунд
Зациклить анимацию, использующую функцию отрисовки p5
Сообщение: ошибка javascript: невозможно установить свойства нулевой настройки «innerHTML» в Selenium 4.7.2 с использованием Python
Почему мой реагирующий родной становится .tsx вместо .js
Рекурсивная функция javascript, которая преобразует ключи вложенных объектов в строку и сохраняет все ключи в массиве
Поиск массива по всем свойствам
Как JavaScript гарантирует, что `setTimeout()` может зарегистрировать данную функцию в очереди микрозадач по истечении времени задержки?
Добавить атрибут стиля для каждых двух дочерних элементов класса, каждый класс должен вести себя независимо, включая их последний дочерний элемент (у которого есть оператор if)