MERN栈认证项目：用户数据无法存入MongoDB求助

核心问题：表单提交逻辑完全失效 #

你的React代码存在嵌套表单+提交按钮脱离绑定表单的致命问题，导致绑定的handleRegister函数从未被触发：

• 外层有一个无提交事件的<form className="Auth-form">，内层又嵌套了一个绑定了onSubmit={handleRegister}的表单
• 提交按钮不在绑定了提交逻辑的内层表单里，点击时触发的是外层表单的默认提交行为（页面刷新），axios请求根本没发送，所以MongoDB自然无数据入库

分步修复 #

1. 修正前端表单结构（关键） #

合并嵌套表单，将onSubmit={handleRegister}绑定到外层表单，确保提交按钮在该表单范围内：

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

// 配置axios基础路径，避免跨域或请求路径错误
axios.defaults.baseURL = 'http://localhost:8000';

export default function Register(){
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const navigate = useNavigate();

  const handleRegister = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post('/register', { email, password });
      console.log(response.data);
      alert('Registration successful');
      // 注册成功后跳转到登录页
      navigate('/login');
    } catch (error) {
      const errMsg = error.response?.data?.message || error.message;
      console.error('注册失败:', errMsg);
      alert(`注册失败: ${errMsg}`);
    }
  };

  return (
    <div className="Auth-form-container" style={{display: 'flex',justifyContent: 'center',alignItems:'center',width: '100%',height: '100vh',backgroundSize: '100% 100%',zIndex: '3',position: 'absolute'}} >
      {/* 将提交事件绑定到外层表单 */}
      <form className="Auth-form" onSubmit={handleRegister} style={{width: '42vw',boxShadow:'rgb(0 0 0 / 16%) 1px 1px 10px',paddingTop: '4.2vw',paddingBottom:'4vw',borderRadius: '8px',backgroundColor: 'white'}} >
        <div className="Auth-form-content" style={{paddingLeft: '12%',paddingRight: '12%'}}>
          <h3 className="Auth-form-title" style={{textAlign: 'center',marginBottom: '1em',fontSize: '2vw',color: 'rgb(34, 34, 34)',fontWeight: '800'}}>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',fontSize: '1vw',fontWeight: '600',color: 'rgb(34, 34, 34)'}}>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='firstName'
                />
            </div>
            <div className="form-group mt-3"style={{display:'flex',alignItems:'center',marginBottom:'.7vw',}}>
                <label style={{width:'6.6vw',fontSize: '1vw',fontWeight: '600',color: 'rgb(34, 34, 34)'}}>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} 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',fontSize: '1vw',fontWeight: '600',color: 'rgb(34, 34, 34)'}}>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} 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>
    )
}

2. 修复后端代码的语法错误 #

/register路由里的res.json调用参数错误，json方法仅接受一个参数，多余的alert需删除：

// 原错误代码
res.status(201).json({ message: 'User registered successfully' },alert('sfdfsfs'));

// 修正后
res.status(201).json({ message: 'User registered successfully' });

3. 验证请求与数据 #

修复后测试时，打开浏览器控制台（F12）的Network标签：

• 提交表单后查看是否有/register的POST请求，状态为201则说明后端处理成功
• 去MongoDB的users集合（mongoose自动将模型名转为复数形式）查看数据是否入库
• 若请求失败，查看控制台的错误信息，排查跨域、参数格式或数据库连接问题

额外优化建议 #

• 后端MongoDB连接URL中指定数据库名，比如...mongodb.net/authDB?retryWrites=true，避免数据存入默认的test数据库
• 前端添加表单验证（如邮箱格式、密码长度），减少无效请求

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