MERN栈表单数据与用户注册问题：FormData及校验异常

1. 优先检查后端JSON解析中间件 #

Express默认不会自动解析JSON格式的请求体，必须手动添加中间件，且要放在所有路由配置之前：

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

// 关键：解析JSON请求体，必须在路由前配置
app.use(express.json());

// 之后再挂载业务路由
app.use('/api/users', userRoutes);

如果前端实际发送的是FormData（即使你说转成了JSON），还需补充express.urlencoded({ extended: true })来兼容表单格式，但优先确保express.json()已配置。

2. 调整路由中间件顺序 #

注册接口绝对不能加verifyToken中间件——注册时用户还未生成token，这个中间件会直接拦截请求，导致后续逻辑无法执行，甚至请求体都无法被解析：

// 错误示例：注册接口带token验证
router.post('/register', verifyToken, [/*校验规则*/], userRegister);

// 正确示例：注册接口无需token验证
router.post('/register', [/*校验规则*/], userRegister);

3. 验证前端数据转换与发送逻辑 #

• 确认FormData转JSON的过程没有丢失字段，用以下方式转换并打印验证：

  const formData = new FormData(formElement);
  const requestData = Object.fromEntries(formData.entries());
  console.log('待发送数据：', requestData); // 确认所有字段（username、password等）都存在
  
  // 发送请求时显式指定Content-Type为application/json
  await apiClient.post('/api/users/register', requestData, {
    headers: { 'Content-Type': 'application/json' }
  });
  

• 打开浏览器DevTools的Network面板，查看请求的Payload，确认所有字段都已正确发送到后端。

4. 优化express-validator校验规则 #

• 非必填字段（比如salary）用optional()标记，避免因字段缺失触发无意义的错误：

  const { body } = require('express-validator');
  
  const registerValidationRules = [
    body('username').notEmpty().withMessage('用户名不能为空'),
    body('email').isEmail().withMessage('邮箱格式不正确'),
    body('password').isLength({ min: 6 }).withMessage('密码至少6位'),
    body('confirmPassword').custom((value, { req }) => {
      if (value !== req.body.password) throw new Error('两次密码不一致');
      return true;
    }),
    // 非必填字段添加optional()
    body('salary').optional().isNumeric().withMessage('薪资必须为数字'),
    body('roles').optional().isArray().withMessage('角色必须为数组')
  ];
  

• 在控制器开头先打印req.body，确认数据是否已被解析：

  // userRegister控制器开头添加
  console.log('接收的请求体：', req.body);
  

  如果这里还是undefined，说明前面的解析中间件或路由配置有问题，先解决这个再处理校验。

5. 验证useFormContext的使用 #

• 确认表单数据被正确收集，在表单组件中监听实时数据：

  import { useFormContext } from 'react-hook-form';
  
  const FormField = () => {
    const { register, watch } = useFormContext();
    const formValues = watch();
    console.log('当前表单数据：', formValues); // 确认所有字段都被正确捕获
  
    return (
      <>
        <input {...register('username')} />
        {/* 其他字段同理 */}
      </>
    );
  };
  

• 确保表单提交时使用handleSubmit，且回调函数正确获取数据：

  const { handleSubmit } = useFormContext();
  
  const onSubmit = (data) => {
    console.log('提交的数据：', data);
    // 调用apiClient发送数据
  };
  
  return <form onSubmit={handleSubmit(onSubmit)}>...</form>;
  

6. 关于控制器缺失salary字段的说明 #

控制器中未处理salary字段只会导致该字段无法存入数据库，不会影响其他字段的读取，所以这不是后端无法读取所有数据的原因。等数据能正常读取后，再补充salary字段的处理逻辑即可。

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