Question

大家好，我在尝试使用React Hooks将数据从前端发布到mongoDB时遇到一个问题。问题是，当我发送数据而不是获取全部内容时，我仅在数据库中获取ID作为响应。我不知道我的代码中缺少什么，我确实需要您的帮助，并且愿意接受所有建议，以便更好地了解该怎么做。下面是我的代码：

CustomerPost：

        import React, { useState } from "react";
import axios from "axios";

export default function CreateCustomer() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");
  const [passport, setPassport] = useState("");
  const [booked, setBooked] = useState(false);

  const onChangeName = (e) => {
    setName({ name: e.target.value });
  };
  const onChangeEmail = (e) => {
    setEmail({ email: e.target.value });
  };
  const onChangePhone = (e) => {
    setPhone({ phone: e.target.value });
  };
  const onChangePassport = (e) => {
    setPassport({ passport: e.target.value });
  };

  const onSubmit = (e) => {
    e.preventDefault();
    const bookingData = {
      name: name,
      email: email,
      phone: phone,
      passport: passport,
    };
    console.log(bookingData);

    axios
      .post("http://localhost:5000/customers", bookingData)
      .then((res) => {
        console.log(res.data);
        setName(name);
        setEmail(email);
        setPhone(phone);
        setPassport(passport);
      })
      .catch((error) => {
        console.log(error);
      });
    setBooked(true);
  };

  return (
    <div>
      {booked ? (
        <p className="bookedMsg">Your room was booked successfully!!!</p>
      ) : (
        <form onSubmit={onSubmit} className="form contact-form">
          <div className="input-group-wrap">
            <div className="input-group">
              <input
                className="input"
                type="text"
                onChange={onChangeName}
                placeholder="Name..."
                required
              />
              <span className="bar"></span>
            </div>
            <div className="input-group">
              <input
                className="input"
                type="email"
                onChange={onChangeEmail}
                placeholder="Email..."
                required
              />
              <span className="bar"></span>
            </div>
            <div className="input-group">
              <input
                onChange={onChangePhone}
                type="number"
                className="input"
                placeholder="Phone..."
                required
              />
              <span className="bar"></span>
            </div>
            <div className="input-group">
              <input
                onChange={onChangePassport}
                type="number"
                className="input"
                placeholder="Passport..."
                required
              />
              <span className="bar"></span>
            </div>
          </div>
          <button type="submit" className="btn form-btn btn-purple">
            BOOK NOW
            <span className="dots">
              <i className="fas fa-ellipsis-h"></i>
            </span>
          </button>
        </form>
      )}
    </div>
  );
}

Customer.Route.js：

     const Express = require("express");
var cors = require("cors");
const router = Express.Router();
const Controller = require("./Controller");

const data = require("./controller");

router.post("/", cors(), function (req, res) {
  Controller.insertCustomer(req.body)
    .then(function (data) {
      res.status(data.status).send({ message: data });
    })
    .catch(function (err) {
      res.status(data.status).send({ message: err.message });
    });
});

router.get("/", cors(), function (req, res) {
  Controller.searchAll()
    .then((data) => {
      res.status(data.status).send({ data: data.message });
    })
    .catch((err) => {
      res.status(err.status).send({ message: err.message });
    });
});

router.get("/:id", cors(), function (req, res) {
  Controller.search(req.params.id)
    .then((data) => {
      res.status(data.status).send({ message: data.message });
    })
    .catch((err) => {
      res.status(err.status).send({ message: err.message });
    });
});

router.put("/:id", cors(), function (req, res) {
  Controller.updateCustomer(req.params.id, req.body)
    .then((data) => {
      res.status(data.status).send({ message: data.message });
    })
    .catch((err) => {
      res.status(err.status).send({ message: err.message });
    });
});

router.delete("/:id", cors(), (req, res) => {
  Controller.delete(req.params.id)
    .then((data) => {
      res.status(data.status).send({ message: data.message });
    })
    .catch((err) => {
      res.status(err.status).send({ message: err.message });
    });
});

module.exports = router;

dbConfig：

require("dotenv").config();
const mongoose = require("mongoose");
const Schema = mongoose.Schema;
const CustomerSchema = new Schema({
  name: {
    type: String,
    require: true,
  },
  email: {
    type: String,
    require: false,
  },
  phone: {
    type: Number,
    require: true,
  },
  passport: {
    type: Number,
    require: true,
  },
});

mongoose.connect(
  process.env.DATABASE_URL,
  { useNewUrlParser: true, useUnifiedTopology: true },
  (err) => {
    if (err) {
      console.log(err);
    }
    console.log("Connected to the mongodb");
  }
);

module.exports = mongoose.model("Customer", CustomerSchema);

Controller.js：

const mongoose = require("../dbSchema/dbConfig");

const CustomerSchema = mongoose.model("Customer");

const Controller = function () {
  this.insertCustomer = function (data) {
    return new Promise(function (resolve, reject) {
      var Customer = new CustomerSchema({
        name: data.name,
        email: data.email,
        phone: data.phone,
        passport: data.passport,
      });
      Customer.save()
        .then(function () {
          resolve({ status: 200, message: "Customer inserted Successfully" });
        })
        .catch(function (err) {
          reject({ status: 500, message: "Error " + err });
        });
    });
  };

  this.updateCustomer = function (id, data) {
    return new Promise((resolve, reject) => {
      CustomerSchema.update({ _id: id }, data)
        .then(() => {
          resolve({ status: 200, message: "Customer updated Successfully" });
        })
        .catch(function (err) {
          reject({ status: 500, message: err });
        });
    });
  };

  this.searchAll = function () {
    return new Promise(function (resolve, reject) {
      CustomerSchema.find()
        .exec()
        .then(function (data) {
          resolve({ status: 200, message: data });
        })
        .catch(function (err) {
          reject({ status: 500, message: err });
        });
    });
  };

  this.search = function (id) {
    return new Promise(function (resolve, reject) {
      CustomerSchema.find({ _id: id })
        .exec()
        .then(function (Customer) {
          resolve({ status: 200, message: Customer });
        })
        .catch((err) => {
          reject({ status: 500, message: err });
        });
    });
  };

  this.delete = function (id) {
    return new Promise(function (resolve, reject) {
      CustomerSchema.remove({ _id: id })
        .then(() => {
          resolve({ status: 200, message: "Customer Removed" });
        })
        .catch((err) => {
          reject({ status: 500, message: err });
        });
    });
  };
};
module.exports = new Controller();

Route.js：

const Express = require("express");
const Routes = Express.Router();
const CustomerRoute = require("../CustomerController/Customer.Route");
Routes.use("/customers", CustomerRoute);
module.exports = Routes;

Answer 1

您似乎正在从react发送一个空对象，可以尝试添加async并等待onSubmit函数吗？我将其发布为答案，以为代码留出更多空间。

const onSubmit = async (e) => { 
    e.preventDefault(); 
    const bookingData = { 
        name: name, 
        email: email, 
        phone: phone, 
        passport: passport, 
    }; 
    console.log(bookingData); 

    await axios.post("/customers", 
    bookingData).then((res) => { 
    console.log(res.data); 
    setName(name);
    setEmail(email); 
    setPhone(phone); 
    setPassport(passport); 
    }).catch((error) => { 
    console.log(error); }); 
    setBooked(true); 
};

如何使用钩子使用ReactJS将数据表单发布到mongoDB

1 个答案: