I'm using a MERN and I'm very new to this so I got stuck. I'm creating a form where you enter some information and a location, I'm trying to save that latitude and longitude (stored in markers variable) to my MongoDB database I tried everything but eventually, it doesn't save to the DB.

Frontend

  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>

Backend server.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.log('MongoDB Connected');
  })
  .catch((error) => {
    console.log(error);
  });

const db = mongoose.connection;

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

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

Backend 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.log(error);
      } else {
        res.json(petData);
      }
      if (petData) {
        console.log('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.log(err);
      } else {
        console.log('New owner created');
        res.redirect('/lostpet');
        res.end('New owner created');
      }
    });
  } catch (err) {
    console.log(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.log(err);
      else {
        console.log('New map created');
        res.redirect('/lostpet');
        res.end('New map created');
      }
    });
  } catch (err) {
    console.log(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.log(err);
      else {
        console.log('New pet created');
        res.redirect('/lostpet');
        res.end('New pet created');
      }
    });
  } catch (err) {
    console.log(err);
    redirect('/');
    res.end();
  }
});

module.exports = router;

Schemas.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;

CodePudding user response：

You can add onSubmit handler on your form

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