使用Axios向MongoDB POST数据仅生成ObjectId，无其他数据存入求助

我正在使用MERN栈开发一个简单的CRUD应用，尝试向数据库添加用户详情，但MongoDB中仅生成_id和__v字段，没有存入用户的name、username等信息。相关代码如下：

前端AddUser组件代码 #

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

后端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;

模型代码 #

const mongoose = require( 'mongoose');

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

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

解决步骤 #

1. 修正前端请求的Content-Type与数据结构

前端当前设置的Content-Type为application/x-www-form-urlencoded，但发送的是JSON格式数据，同时后端期望数据嵌套在user字段下，需同步调整：

// 修改请求头和发送的数据结构
const config = {
  headers: {
    'Content-Type': 'application/json'
  }
}

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

另外修正表单输入框的placeholder拼写错误（原拼写为placeholer），避免影响用户体验：

<input onChange={(e) => onValueChange(e)} placeholder="Add Name" name='name' value={name} id="my-input" />
<input onChange={(e) => onValueChange(e)} placeholder="Add Username" name='username' value={username} id="my-input" />
<input onChange={(e) => onValueChange(e)} placeholder="Add Email" name='email' value={email} id="my-input" />
<input onChange={(e) => onValueChange(e)} placeholder="Add Phone" name='phone' value={phone} id="my-input" />

2. 确保后端启用JSON解析中间件

在Express主入口文件（如app.js）中添加JSON解析中间件，否则req.body会为空：

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

// 启用JSON请求体解析
app.use(express.json());

3. 新增日志排查数据接收情况

在后端路由中添加日志，确认请求体是否正确接收：

router.post('/add',async (req,res) =>{
  console.log('Received request body:', req.body); // 打印请求体排查问题
  try { 
    const newUser = new User({user: req.body.user});
    await newUser.save();
    res.status(201).json(newUser);
  } catch (error) {
    res.status(409).json({ message: error.message});     
  }
});

内容的提问来源于stack exchange，提问作者jjp