在 React 中获取 Mongoose 验证错误消息

Posted

技术标签:

【中文标题】在 React 中获取 Mongoose 验证错误消息【英文标题】:Get Mongoose validation error message in React 【发布时间】:2021-01-29 01:03:31 【问题描述】:

我正在尝试使用 Mongoose 验证用户创建/编辑等,并在我的前端取回消息,但我得到的只是

POST http://192.168.0.11:3000/users/create 400 (Bad Request)
CreateUser.jsx:48 Error: Request failed with status code 400
    at e.exports (createError.js:16)
    at e.exports (settle.js:17)
    at XMLHttpRequest.d.onreadystatechange (xhr.js:61)

我的用户架构:

const User = new mongoose.Schema(
  Name: 
    type: String,
    required: "Username is required for a user!",
    minlength: 4,
    maxlength: 16,
  ,
  Password: 
    type: String,
    required: "Password is required for a user!",
    minlength: 4,
    maxlength: 20,
  ,
  Role: 
    type: String,
    required: "User must have a role!",
    enum: ["Operator", "Admin"],
  
);

在节点中:

router.post("/create", async (req, res) => 
  try 
    const user = new User(
      Name: req.body.Name,
      Password: req.body.Password,
      Robots: req.body.Robots,
      Role: req.body.Role,
    );

    await user.save();
    res.send("success");
   catch (e) 
    console.log(e);
    res.status(400).json("Error" + e);
  
);

在 React 中:

try   
  const userCreated = await axios.post(`$ENDPOINT/users/create`, user);
  console.log(userCreated);
 catch (e) 
  console.log(e);

如果成功,我会返回“成功”消息,否则我会不断收到 POST 400 bad request 消息。

如果我在节点中 console.log 它确实会引发验证失败错误,但我无法在前端恢复错误。

【问题讨论】:

您正在使用res.json,但是当您在后端收到错误时将其传递给一个字符串。您使用res.send 发送的成功消息。也许这会给您带来一些问题。 改用res.status(400).send('error ',e) @MomoSetti 它说这种方法已被弃用。我也尝试过 send(e) 但这也没有帮助,我仍然在前端遇到同样的错误。 【参考方案1】:

我用我的一个快速样板 repo here 尝试了几乎相同的示例,我能够返回这样的 Mongo 验证错误。

用户模型的一部分

first_name: 
      type: String,
      trim: true,
      minlength: 4,

控制器

try 
   const user = await new User(req.body);
   const newUser = await user.save();
   res.status(201).json( status: true, newUser );

 catch (error) 
   console.log(error);
   res.status(400).json(error);

我收到的错误响应是 400 Bad Request,因此您可以检查您的 React 应用的 catch 中是否有 name == 'ValidationError',也可以使用 errors 与该字段一起显示。


    "errors": 
        "first_name": 
            "message": "Path `first_name` (`a`) is shorter than the minimum allowed length (4).",
            "name": "ValidatorError",
            "properties": 
                "message": "Path `first_name` (`a`) is shorter than the minimum allowed length (4).",
                "type": "minlength",
                "minlength": 4,
                "path": "first_name",
                "value": "a"
            ,
            "kind": "minlength",
            "path": "first_name",
            "value": "a"
        
    ,
    "_message": "User validation failed",
    "message": "User validation failed: first_name: Path `first_name` (`a`) is shorter than the minimum allowed length (4).",
    "name": "ValidationError"

【讨论】:

以上是关于在 React 中获取 Mongoose 验证错误消息的主要内容,如果未能解决你的问题,请参考以下文章

Mongoose 验证错误:架构配置无效

处理 CRUD 应用程序中的重复值错误(react-redux + express-mongoose)

使用 Apollo-GraphQL、MongoDB-Mongoose 和 Node-Express 构建的 React 应用程序在生产构建中返回 404 错误

如何从服务器端 express/mongo/mongoose 中的 URL,客户端的 axios/react/redux 中获取参数 ID

mongoose 中本地护照的身份验证错误

处理 Mongoose 验证错误——在哪里以及如何处理?