Не удается сохранить данные useState в базе данных MongoDB

Я использую MERN, и я очень новичок в этом, поэтому я застрял. Я создаю форму, в которой вы вводите некоторую информацию и местоположение, я пытаюсь сохранить эту широту и долготу (хранящиеся в переменной markers) в моей базе данных MongoDB. Я пробовал все, но в итоге она не сохраняется в БД.

Внешний интерфейс

  const [markers, setMarkers] = useState([]);

// Function to get the lat and lng
  const onMapClick = (e, props) => {
    setMarkers((current) => [
      ...current,
      {
        lat: e.latLng.lat(),
        lng: e.latLng.lng(),
      },
    ]);

    if (markers.length > 0) {
      setMarkers(markers.slice(0, 1));
      setMarkers(markers.slice(1));
    }
  };


return (
        <form method = "POST" action = "/handleSubmit">
          <div className = "flex flex-col ml-36">
            <div className = "mt-6">
              <p>Your full name</p>
              <input
                type = "text"
                name = "ownerName"
                className = "border-2 border-black w-80 p-1"
              />
            </div> ...

          <div className = "m-20">
            <h1 className = "text-4xl font-bold mb-5">
              Where he was last seen?
            </h1>
            <GoogleMap
              mapContainerStyle = {mapContainerStyle}
              zoom = {13}
              center = {center}
              onClick = {onMapClick}
            >

// Markers I'm trying to save to DB
              <div id = "mapMarkers">
                {markers.map((marker) => (
                  <Marker
                    position = {{ lat: marker.lat, lng: marker.lng }}
                    name = "marker"
                  />
                ))}
                {markers.map((marker) => (
                  <Circle
                    center = {{ lat: marker.lat, lng: marker.lng }}
                    options = {optionsMarker.circle}
                    name = "marker"
                  />
                ))}
              </div>
            </GoogleMap>
          </div>

          <div className = "m-20">
            <input
              type = "submit"
              value = "Vytvoriť profil"
              className = "py-4 px-16 bg-yellow-500 text-2xl font-semibold rounded-lg"
            />
          </div>
        </form>

Бэкендсервер.js

//express
const express = require('express');
const app = express();

const bodyParser = require('body-parser');

// dotenv
require('dotenv').config();

// mongoose
const mongoose = require('mongoose');

const routesHandler = require('./routes/handler.js');

const port = process.env.PORT || 7000;

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json({ extended: false }));
app.use('/', routesHandler);

const mongoDB = process.env.MONGO_URI;

mongoose
  .connect(mongoDB, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(() => {
    console.info('MongoDB Connected');
  })
  .catch((error) => {
    console.info(error);
  });

const db = mongoose.connection;

db.on('error', console.error.bind(console, 'Connection error:'));

app.listen(port, () => {
  console.info(`Example app listening on port ${port}`);
});

Серверная часть handler.js

const express = require('express');
const router = express.Router();
const Schemas = require('../models/Schemas');

router.get('/pets', async (req, res) => {
  const pets = Schemas.pets;

  const ownerPets = await pets
    .find({})
    .populate('owner', 'map')
    .exec((error, petData) => {
      if (error) {
        res.end('Error getting pets');
        console.info(error);
      } else {
        res.json(petData);
      }
      if (petData) {
        console.info('Pets found');
      } else {
        res.end('Pets not found');
      }
    });
});

router.post('/handleSubmit', async (req, res) => {
  // handle Owner data
  const owner = {
    name: req.body.ownerName,
    tel: req.body.tel,
    email: req.body.email,
  };
  const newOwner = new Schemas.owners(owner);

  try {
    await newOwner.save(async (err, newUserResult) => {
      if (err) {
        console.info(err);
      } else {
        console.info('New owner created');
        res.redirect('/lostpet');
        res.end('New owner created');
      }
    });
  } catch (err) {
    console.info(err);
    res.redirect('/');
    res.end('Error creating owner');
  }

  // handle map coordinates
  const map = {
    cor: req.body.marker,
  };
  const newMap = new Schemas.maps(map);

  try {
    await newMap.save((err, newMapResult) => {
      if (err) console.info(err);
      else {
        console.info('New map created');
        res.redirect('/lostpet');
        res.end('New map created');
      }
    });
  } catch (err) {
    console.info(err);
    redirect('/');
    res.end();
  }

  // handle Pet data
  const pet = {
    name: req.body.petName,
    details: req.body.details,
    lost_date: req.body.lostDate,
  };
  const pet_owner = newOwner;

  let map_cor = newMap;

  const newPet = new Schemas.pets({
    name: pet.name,
    details: pet.details,
    lost_date: pet.lost_date,
    owner: pet_owner._id,
    map: map_cor,
  });

  try {
    await newPet.save((err, newPetResult) => {
      if (err) console.info(err);
      else {
        console.info('New pet created');
        res.redirect('/lostpet');
        res.end('New pet created');
      }
    });
  } catch (err) {
    console.info(err);
    redirect('/');
    res.end();
  }
});

module.exports = router;

Схемы.js

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

const ownerSchema = Schema({
  name: { type: String, required: true },
  tel: { type: String, required: true },
  email: { type: String, required: true },
  entryDate: { type: Date, default: Date.now },
});

const petSchema = Schema({
  name: { type: String, required: true },
  details: { type: String, required: true },
  lost_date: { type: Date, required: true },
  owner: { type: Schema.Types.ObjectId, ref: 'owners' },
});

const mapSchema = Schema({
  cor: { type: Number, required: true },
});

const Owners = mongoose.model('owners', ownerSchema);
const Pets = mongoose.model('pets', petSchema);
const Maps = mongoose.model('maps', mapSchema);
const mySchema = { owners: Owners, pets: Pets, maps: Maps };

module.exports = mySchema;

Предполагая, что данные правильно отправлены на сервер, можем ли мы увидеть модель pets?

semperlabs 16.03.2022 17:51

@semperlabs Да, конечно.

pandiak 16.03.2022 18:20

Ваш cor тип Object? Что должен получить cor, можете привести пример

semperlabs 16.03.2022 18:33

Когда я console.infomarkers, я получу объект с lat и lng. Поэтому я подумал, может быть, я могу просто сохранить весь объект. Это в принципе бессмысленно, потому что это не сработало.

pandiak 16.03.2022 19:01

В этом случае ваше поле схемы должно иметь вид cor:{ lat: Number, lng: Number }

semperlabs 16.03.2022 19:10

@semperlabs Спасибо. Но как мне отправить markers в useState() в БД?

pandiak 16.03.2022 21:25
Поведение ключевого слова "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
6
39
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Вы можете добавить обработчик onSubmit в свою форму

<form onSubmit = {submitHandler}>...</form>
  const submitHandler = (e) => {
    e.preventDefault();
    const data = {
      ...formInputValues, // your input values
        markers
    };
    fetch(YOUR_SERVER_URL, {
      method: "POST",
      body: JSON.stringify(data),
      headers: {
        "Content-Type": "application/json",
      },
    }).then(res => {
      res.json();
    }).catch(e => throw new Error(e));
  }

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