React注册功能异常：JSON解析错误与后端500错误排查

问题现象 #

• 前端提交表单后控制台报错：JSON.parse: unexpected end of data at line 1 column 1 of the JSON data
• 后端返回HTTP/1.1 500 Internal Server Error，同时bcryptjs抛出异常：Error: Illegal arguments: undefined, string

问题根源 #

1. 前端表单提交事件绑定错误 #

onSubmit事件绑定在了外层<div>而非<form>标签上，导致表单默认提交行为无法被正确拦截，可能引发请求中断或数据未完整发送。

2. 表单数据未双向绑定 #

输入框未绑定value属性，若用户未输入某个字段，formData中不会生成对应键值对，后端解构时会出现undefined值。

3. 前端状态更新拼写错误 #

代码中setLoadnig(false)是拼写错误，应为setLoading(false)，导致loading状态无法正常重置，影响交互逻辑。

4. 后端未配置JSON请求体解析 #

若Express应用未添加express.json()中间件，无法解析JSON格式的请求体，req.body会是空对象，导致password参数为undefined，触发bcryptjs的非法参数错误。

5. 后端错误响应格式不规范 #

异常抛出时，错误处理中间件未返回合法JSON响应，导致前端res.json()解析失败。

修复步骤 #

前端修复 #

（1）修正表单提交事件绑定

将onSubmit从外层div移到form标签上：

// 移除div上的onSubmit属性
<div className="p-3 max-w-lg mx-auto">
  // 给form添加onSubmit
  <form onSubmit={handleSubmit} className="flex flex-col gap-4">
    // 输入框与按钮代码
  </form>
</div>

（2）添加表单数据双向绑定

给每个输入框绑定value属性，确保数据同步：

<input
  type="text"
  placeholder="username"
  className="bord p-3 rounded-lg"
  id="username"
  onChange={handleChange}
  value={formData.username || ''}
/>
<input
  type="email"
  placeholder="email"
  className="bord p-3 rounded-lg"
  id="email"
  onChange={handleChange}
  value={formData.email || ''}
/>
<input
  type="password"
  placeholder="password"
  className="bord p-3 rounded-lg"
  id="password"
  onChange={handleChange}
  value={formData.password || ''}
/>

（3）修正状态更新拼写错误

把setLoadnig(false)改为正确的setLoading(false)：

if (data.success === false) {
  setLoading(false);
  setError(data.message);
  return;
}

（4）优化初始状态

给formData设置初始值，确保每个字段都存在：

const [formData, setFormData] = useState({
  username: '',
  email: '',
  password: ''
});

后端修复 #

（1）添加JSON解析中间件

在Express入口文件（如app.js）中添加：

import express from 'express';
const app = express();

// 解析JSON格式的请求体
app.use(express.json());

（2）添加参数校验

在signup控制器中先校验必填字段，避免bcryptjs接收undefined参数：

export const signup = async (req, res, next) => {
  const { username, email, password } = req.body;
  
  // 校验所有必填字段
  if (!username || !email || !password) {
    return next(errorHandler(400, '所有字段均为必填项'));
  }
  
  const hashedPassword = bcryptjs.hashSync(password, 10);
  const newUser = new User({ username, email, password: hashedPassword });
  try {
    await newUser.save();
    // 返回标准JSON格式响应
    res.status(201).json({ success: true, message: "用户创建成功" });
  } catch (error) {
    next(error);
  }
};

（3）规范错误处理中间件

确保错误处理中间件返回JSON格式响应：

// error.js
export const errorHandler = (statusCode, message) => {
  const error = new Error(message);
  error.statusCode = statusCode;
  return error;
};

// Express入口文件
app.use((err, req, res, next) => {
  const statusCode = err.statusCode || 500;
  const message = err.message || '服务器内部错误';
  res.status(statusCode).json({
    success: false,
    message: message
  });
});

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