React调用/todos/add接口返回400 Bad Request错误排查求助

问题根源 #

你前端提交的待办对象字段名存在拼写错误，后端接收和MongoDB模型定义的必填字段为description，但你前端onSubmit方法中构造的todo对象误将字段名写为descriptipn（字母c和p顺序颠倒），导致后端拿到的req.body.description为空值，触发MongoDB的必填字段校验规则，最终返回400错误。

你用Insomnia测试时传入的字段名是正确的description，因此能正常写入数据，和前端报错的场景不一致。

修复方案 #

找到前端TodoCreate组件onSubmit方法内的todo对象定义，修正字段拼写即可：

错误代码 #

const todo = {
  username: this.state.username,
  descriptipn: this.state.description, // 字段名拼写错误
  date: this.state.date,
};

修正后代码 #

const todo = {
  username: this.state.username,
  description: this.state.description, // 修正为正确字段名
  date: this.state.date,
};

可选优化（非本次报错诱因） #

你前端componentDidMount生命周期中的错误捕获代码写法不规范：err.status(400).json()是Express后端的响应方法，不能在前端axios的错误回调中调用，建议修改为前端侧的错误提示逻辑，示例如下：

.catch((err) => {
  console.log("获取用户列表失败：", err.response?.data || err.message);
});

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