Problème : lors de l'utilisation d'axios pour POST des données dans MongoDB, seul l'ObjectId est renvoyé et aucune autre donnée n'est publiée. Titre modifié : la requête Axios POST dans MongoDB renvoie uniquement ObjectId, les autres données ne sont pas publiées.

Question

Je construis une application CRUD simple en utilisant la pile MERN Vous trouverez ci-dessous le code pour ajouter les détails de l'utilisateur dans la base de données

import React , {useState, useEffect} from 'react'
import axios from 'axios';
import { useNavigate } from 'react-router-dom';

const initialValue = {
  name: '',
  username: '',
  email: '',
  phone: ''
}

const AddUser = () => {
// hooks
const [user, setUser] = useState(initialValue);
const { name, username, email, phone } = user; 

let navigate = useNavigate();
const onValueChange = (e) => {
    setUser({...user, [e.target.name]: e.target.value})
}

// ADD USER
const config = {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
}

const addUser = async (user) => {
  return await axios.post("http://localhost:5000/add", user , config);
}
const addUserDetails = async() => {
    await addUser(user);
    navigate('/all');
}

  return (
    <div>
      <h1>Add Details</h1>
      <form className="form">
      <input onChange={(e) => onValueChange(e)} placeholer="Add Name"name='name' value={name} id="my-input" />
      <input onChange={(e) => onValueChange(e)} placeholer="Add Username"name='username' value={username} id="my-input" />
      <input onChange={(e) => onValueChange(e)} placeholer="Add Email"name='email' value={email} id="my-input" />
      <input onChange={(e) => onValueChange(e)} placeholer="Add Phone"name='phone' value={phone} id="my-input" />
      <button type="submit" onClick={() => addUserDetails()}>Add</button>
      </form>
    
    </div>
  )
}

export default AddUser

Ce qui suit est une capture d'écran de mongodb

Ce qui suit est Route.js

const router = require('express').Router();
    const User = require('../model/todoItems.js');
    
    // Coming from model
    
    // POST DATA
    router.post('/add',async (req,res) =>{
    
    try { 
      const newUser = new User({user: req.body.user});
    
      // saving in db
      await newUser.save();
      res.status(201).json(newUser);
      
    } catch (error) {
      res.status(409).json({ message: error.message});     
    }
    }
    );
    
    module.exports = router;

Voici le modèle

const mongoose = require( 'mongoose');


const userSchema = new mongoose.Schema({
  user:{
    name: String,
    username: String,
    email: String,
    phone: Number
  }
    
});

module.exports= mongoose.model('user', userSchema);

{_id:ObjectId(641548f49338e07c498bf231),__v:0} c'est ce que j'ai Connexion à la base de données réussie. Je veux que tous les détails soient publiés, que dois-je faire ?

Answer 1

Il y a des erreurs dans votre code. Je pense que le problème sera résolu lorsque vous les corrigerez.

1-) Vérifiez que vous avez importé le bon modèle dans route.js. Parce que c'est todoItem.js. Je pense que cela doit être lié à l'utilisateur.

const User = require('../model/todoItems.js');

2-) Dans le modèle mangouste, il n'est pas nécessaire d'utiliser l'utilisateur comme parent. Supprimez-le simplement pour qu'il ressemble à :

const userSchema = new mongoose.Schema({
    name: String,
    username: String,
    email: String,
    phone: Number
});

3-) Dans route.js, modifiez la ligne const newUser comme suit :

const newUser = new User(req.body);

4-) Assurez-vous d'utiliser console.log pour obtenir le bon req.body

console.log("req.body: ", req.body);
const newUser = new User(req.body);