NodeJS+MongoDB Atlas注册异常：用户数据无法存入数据库

你的代码里存在多个关键问题，导致用户数据无法存入数据库，以下是逐一排查和修复方案：

1. 后端请求参数解构错误 #

你在/register和/login接口里用数组解构const [email,password] = req.body，但req.body是对象类型，数组解构会导致email和password为undefined，数据库因为Schema里required:true的约束无法存入数据。

修复： 改用对象解构：

const { email, password } = req.body

2. 注册接口逻辑错误 #

• 检查用户是否存在时，不应同时匹配email和password，只需要检查email即可，否则同一个邮箱换个密码会被当成新用户注册，不符合业务逻辑。
• res.json('no exist')之后调用insertMany，虽然代码会执行，但响应已发送，建议先执行插入操作再返回响应。
• 单个用户插入用create比insertMany更合适。

修复后的注册接口：

app.post('/register', async (req,res)=>{
    const { email, password } = req.body

    const data = { email, password }

    try {
        // 只通过email检查用户是否存在
        const check = await collection.findOne({ email })

        if(check){
            res.json('exist')
        } else {
            // 先插入数据再返回响应
            await collection.create(data)
            res.json('no exist')
        }
    } catch (error) {
        console.error('注册错误:', error) // 打印错误便于排查
        res.json('error')
    }
})

3. 数据库连接冗余且存在错误 #

你同时使用了mongoose.connect和原生MongoClient连接，而且MongoClient连接后立即关闭，属于冗余操作；另外你的uri里密码部分多了一个冒号admin::<my password>，应该是admin:<my password>。

修复后的数据库模型文件（user.js）：

const mongoose = require("mongoose")

const url = "mongodb+srv://admin:<my password>@cluster0.fecptpd.mongodb.net/?retryWrites=true&w=majority";

mongoose.connect(url)
.then(()=>{
    console.log('mongodb connected')
})
.catch((err)=>{
    console.log('连接失败:', err) // 打印连接错误
})

const newSchema = new mongoose.Schema({
    email:{
        type:String,
        required:true
    },
    password:{
        type:String,
        required:true
    },
});

const collection = mongoose.model('collection', newSchema)

module.exports = collection

4. 前端代码的关键问题 #

• 未导入axios，会导致发送请求时报错。
• 表单输入框未绑定state，email和password的state始终为空，发送给后端的是空值。
• 表单未绑定onSubmit事件，点击提交按钮会触发默认刷新，不会执行submit函数。
• 嵌套了<form>标签，属于无效HTML，会干扰表单行为。

修复后的前端Register组件：

import React, { useState } from "react";
import { NavLink, useNavigate } from "react-router-dom";
import axios from 'axios'; // 导入axios

export default function Register(){

  const history = useNavigate()

  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  async function submit(e){
    e.preventDefault()

    try {
      await axios.post('http://localhost:5174/register', {
        email, password
      })
      .then(res=>{
        if (res.data === 'exist'){
          window.alert('用户已存在')
        } else if (res.data === 'no exist'){
          history('/login', { state:{id:email} })
        } else {
          window.alert('注册失败，请重试')
        }
      })
      .catch(e=>{
        window.alert('请求错误')
        console.error(e)
      })

    } catch (error) {
      console.error(error)
    }
  }
  
  return (
    <div className="Auth-form-container">
      {/* 移除嵌套的form，只保留外层form并绑定onSubmit */}
      <form className="Auth-form" onSubmit={submit}>
        <div className="Auth-form-content">
          <h3 className="Auth-form-title">Sign Up</h3>
          <div className="text-center" style={{marginBottom:'1vw',fontSize:'1.3vw',}}>
            Already registered?{" "}
            <NavLink to={'/login'} className="link-primary"  style={{cursor:'pointer',}}>
              Sign In
            </NavLink>
          </div>
          
          <div className="form-group mt-3" style={{display:'flex',alignItems:'center',marginBottom:'.7vw',}}>
              <label style={{width:'6.6vw',}}>Full Name</label>
              <input
              type="text"
              className="form-control mt-1"
              placeholder="e.g Jane Doe"
              style={{width:'80%',fontSize:'1vw',padding:'.7vw 1vw .7vw 1vw',}}
              name='username'
              />
          </div>
          <div className="form-group mt-3"style={{display:'flex',alignItems:'center',marginBottom:'.7vw',}}>
              <label style={{width:'6.6vw',}}>Email address</label>
              <input
              type="email"
              className="form-control mt-1"
              placeholder="Email Address"
              style={{width:'80%',fontSize:'1vw',padding:'.7vw 1vw .7vw 1vw',}}
              name='email'
              value={email} // 绑定state值
              onChange={(e) => setEmail(e.target.value)} // 绑定输入事件
              />
          </div>
          <div className="form-group mt-3" style={{display:'flex',alignItems:'center',marginBottom:'.7vw',}}>
              <label style={{width:'6.6vw',}}>Password</label>
              <input
              type="password"
              className="form-control mt-1"
              placeholder="Password"
              style={{width:'80%',fontSize:'1vw',padding:'.7vw 1vw .7vw 1vw',}}
              name='password'
              value={password} // 绑定state值
              onChange={(e) => setPassword(e.target.value)} // 绑定输入事件
              />
          </div>
          
          <div className="d-grid gap-2 mt-3" style={{display:'flex',justifyContent:'center',}}>
            <button type="submit"  className="btn btn-primary" style={{padding:'.7vw 1vw .7vw 1vw',background:'none',width:'30%',fontSize:'.9vw',border:'solid thin lightgrey',boxShadow:' rgb(0 0 0 / 16%) 1px 1px 10px',cursor:'pointer',}}>
              Submit
            </button>
          </div>
        </div>
      </form>
    </div>
  )
}

按照以上修改后，注册流程应该能正常工作，数据可以存入MongoDB Atlas。另外建议在后端的catch块里打印错误信息，便于排查后续可能出现的问题。

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