#node.js #reactjs #mongodb #express
Вопрос:
У меня есть проект MERN, в котором я должен просто поместить данные своей формы в свою базу данных. Все выглядит хорошо, но данные не вставляются. пока ошибки тоже нет.
Я закончил console.log(req.body) . после того, как я опустошился {} .
Как я уже пробовал так много предыдущих вопросов в stackoverflow, но ни один из них мне не помогает
это мой скриншот консоли моего браузера
Отображается staus 201, но данные не поступают в мою базу данных
Как отладить эту ошибку. Я перепробовал все решения. По крайней мере, расскажите мне о возможных причинах этой ошибки. это мне очень поможет. я пытаюсь с полного 1 дня
Схема пользователей
const userSchema = new mongoose.Schema({ identity: { type: String, }, names: { type: String, }, phone: { type: String, }, email: { type: String, }, city: { type: String, }, address: { type: String, }, subject: { type: String, }, classes: { type: String, }, message: { type: String, }, }) const USER = mongoose.model("USER", userSchema) module.exports = USER register.js(интерфейс)
const Register = () =gt; { const [newUser, setNewUser] = useState({ identity: "", names: "", phone: "", email: "", city: "", address: "", subject: "", classes: "", message: "", }); const handleSubmit = (e) =gt; { e.preventDefault(); const formData = new FormData(); formData.append("identity", newUser.identity); formData.append("names", newUser.names); formData.append("phone", newUser.phone); formData.append("email", newUser.email); formData.append("city", newUser.city); formData.append("address", newUser.address); formData.append("subject", newUser.subject); formData.append("classes", newUser.classes); formData.append("message", newUser.message); axios({ method: "post", url: "/register", data: formData, headers: { "Content-Type": "application/json" }, }) .then((response) =gt; { console.log(response); }) .then((data) =gt; { console.log(data); }) .catch((error) =gt; { if (error.response) { console.log(error.response.data); } }); }; const handleChange = (e) =gt; { setNewUser({ ...newUser, [e.target.name]: e.target.value }); }; return ( lt;gt; lt;div class="container register mt-5"gt; lt;h1 class="well text-register shadow p-4 rounded-3"gt; Join as{" "} lt;label class="student"gt; [{" "} lt;img src="https://img.icons8.com/external-vitaliy-gorbachev-lineal-color-vitaly-gorbachev/60/000000/external-man-avatars-vitaliy-gorbachev-lineal-color-vitaly-gorbachev-12.png" /gt;{" "} Parent/Student{" "} lt;img src="https://img.icons8.com/external-justicon-lineal-color-justicon/64/000000/external-student-back-to-school-justicon-lineal-color-justicon.png" /gt;{" "} ] lt;/labelgt; lt;h1 class="well text-register down"gt; lt;i class="fas fa-arrow-right"gt;lt;/igt; Hey! If you are looking for right tutor near by your location. Don't worry you are at right place.{" "} lt;i class="fas fa-arrow-left"gt;lt;/igt; lt;/h1gt; lt;/h1gt; lt;div class="col-lg-12 well rounded-3"gt; lt;div class="row mt-5 "gt; lt;form onSubmit={handleSubmit} method = "post" class="shadow p-5"gt; lt;div class="col-sm-12"gt; lt;div class="row"gt; lt;div class="col-sm-12 form-group"gt; lt;labelgt; {" "} lt;i class="far fa-dot-circle"gt;lt;/igt; Your Identity lt;/labelgt; lt;input type="text" placeholder="Write Student or Parent" class="form-control" name="identity" id="identity" value={newUser.identity} onChange={handleChange} /gt; lt;/divgt; lt;/divgt; lt;div class="form-group"gt; lt;labelgt; {" "} lt;i class="far fa-dot-circle"gt;lt;/igt; Name lt;/labelgt; lt;input type="text" placeholder="Enter Your Full Name Here.." class="form-control" name="names" id="names" value={newUser.names} onChange={handleChange} /gt; lt;/divgt; lt;div class="form-group"gt; lt;labelgt; {" "} lt;i class="far fa-dot-circle"gt;lt;/igt; Phone Number lt;/labelgt; lt;input type="text" placeholder="Enter Phone Number Here.." class="form-control" name="phone" id="phone" value={newUser.phone} onChange={handleChange} /gt; lt;/divgt; lt;div class="form-group"gt; lt;labelgt; {" "} lt;i class="far fa-dot-circle"gt;lt;/igt; Email Address lt;/labelgt; lt;input type="text" placeholder="Enter Email Address Here.." class="form-control" name="email" id="email" value={newUser.email} onChange={handleChange} /gt; lt;/divgt; lt;div class="row"gt; lt;div class="col-sm-6 form-group"gt; lt;labelgt; {" "} lt;i class="far fa-dot-circle"gt;lt;/igt; City lt;/labelgt; lt;input type="text" placeholder="Enter City Name Here.." class="form-control" name="city" id="city" value={newUser.city} onChange={handleChange} /gt; lt;/divgt; lt;div class="col-sm-6 form-group"gt; lt;labelgt; {" "} lt;i class="far fa-dot-circle"gt;lt;/igt; Address lt;/labelgt; lt;textarea placeholder="Enter Address Here.." rows="3" class="form-control" name="address" id="address" value={newUser.address} onChange={handleChange} gt;lt;/textareagt; lt;/divgt; lt;/divgt; lt;div class="row"gt; lt;div class="col-sm-6 form-group"gt; lt;labelgt; {" "} lt;i class="far fa-dot-circle"gt;lt;/igt; Subject lt;/labelgt; lt;input type="text" placeholder="Enter Subject Here.." class="form-control" name="subject" id="subject" value={newUser.subject} onChange={handleChange} /gt; lt;/divgt; lt;div class="col-sm-6 form-group"gt; lt;labelgt; {" "} lt;i class="far fa-dot-circle"gt;lt;/igt;Student Class lt;/labelgt; lt;input type="text" placeholder="Enter Student Class" class="form-control" name="classes" id="classes" value={newUser.classes} onChange={handleChange} /gt; lt;/divgt; lt;/divgt; lt;div class="form-group"gt; lt;labelgt; {" "} lt;i class="far fa-dot-circle"gt;lt;/igt; Message lt;/labelgt; lt;textarea placeholder="Enter Any message you have for us..." rows="3" class="form-control" name="message" id="message" value={newUser.message} onChange={handleChange} gt;lt;/textareagt; lt;/divgt; lt;button value="register" type="submit" class="btn btn-lg btn-info"gt; Submit lt;/buttongt; lt;/divgt; lt;/formgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/gt; ); }; auth.js
router.get("/", (req, res) =gt; { res.send("hello, i am communicating with router"); }) router.post("/register", async (req, res) =gt; { const { identity, names, phone, email, city, address, subject, classes, message } = req.body console.log(req.body) try { const user = new User({identity ,names, phone,email,city,address, subject, classes, message }) await user.save() res.status(201).json({ message: "user registered successfulluy" }) } catch (err) { console.log(err) } }) module.exports = router app.js
const port = 5000 env.config({path: "../server/config.env"}) require("../server/db/conn") app.use(cors()); app.use(express.json()) app.use(require("../server/router/Auth")) app.listen(port, (err) =gt; { if (err) { return console.error(err); } return console.log(`server is listening on ${port}`); }); Пожалуйста, помогите. я столько раз пытался!!
Спасибо Тебе!!!
Ответ №1:
Измените функцию handleSubmit, не используйте FormData для отправки ваших данных в виде приложения/json
Вместо этого просто используйте свое текущее состояние реакции
const handleSubmit = (e) =gt; { e.preventDefault(); axios({ method: "post", url: "/register", data: JSON.stringify(newUser), headers: { "Content-Type": "application/json" }, }) .then((response) =gt; { console.log(response); }) .then((data) =gt; { console.log(data); }) .catch((error) =gt; { if (error.response) { console.log(error.response.data); } }); };