无法显示正确的错误信息

Question

我正在尝试在 MERN 堆栈应用程序中实施用户身份验证。

这是我正在尝试做的事情：

我在前端有一张注册表。当用户第二次使用与第一次相同的电子邮件 ID 注册时，应在注册表顶部的前端显示一条消息“用户已注册” .我正在从后端以 JSON 格式发回此响应（“用户已注册”），错误代码为 400。代码如下所示。

const express = require('express');
const asyncHandler = require('express-async-handler');
const User = require('../models/userModel');
const generateToken = require('../utils/generateToken');

const router = express.Router();

router.post('/', asyncHandler(async (req, res, next) => {
    const {name, email, password} = req.body;

    const userExists = await User.findOne({email});

    if(userExists) {
        res.status(400).json({message: 'User already registered'});
    }

    const user = await User.create({
        name,
        email,
        password
    })

    if(user) {
        res.status(201).json({
            _id: user._id,
            name: user.name,
            token: generateToken(user._id)
        })
    } else {
        res.json({message: 'Invalid user data'});
    }
}));

module.exports = router;

我面临的问题是，显示的消息不是“用户已注册”，而是“请求失败，状态代码为 400”。

当我检查“网络”选项卡时，我看到消息“用户已注册”作为响应从服务器返回。

以下是注册表的完整代码。

import React, {useState} from 'react'
import {useFormik} from 'formik'
import * as Yup from 'yup';
import axios from 'axios';

const RegisterScreen = ({history}) => {

    const [error, setError] = useState(null);

    const formik = useFormik({
      initialValues: {
        name: '',
        email: '',
        password: "",
      },
      validationSchema: Yup.object({
        name: Yup.string()
          .max(15, 'Must be 15 characters or less')
          .required('Required'),
          email: Yup.string()
            .email('Invalid email address')
            .required('Required'),
          password: Yup.string()
            .required('Required')
      }),
      onSubmit: async (values, {resetForm}) => {
        try {
          const response = await axios.post('/api/users', values);
          history.push('/login');

        } catch (ex) {
          console.error(ex);
          setError(ex);
          }
      },
    });
    return (
      <form onSubmit={formik.handleSubmit}>
          <div className="form-group col-md-4 mx-auto mt-5">
              {error && <div className="alert alert-danger" role="alert">{error.message}</div>}
              <label htmlFor="firstName">Name</label>
              <input
                  className="form-control"
                  id="name"
                  name="name"
                  type="text"
                  onChange={formik.handleChange}
                  onBlur={formik.handleBlur}
                  value={formik.values.name}
              />
              {formik.touched.name && formik.errors.name ? <small className="form-text text-danger">{formik.errors.name}</small>:null}
          </div>
          <div className="form-group col-md-4 mx-auto">
              <label htmlFor="email">Email Address</label>
              <input
                  className="form-control"
                  id="email"
                  name="email"
                  type="email"
                  onChange={formik.handleChange}
                  onBlur={formik.handleBlur}
                  value={formik.values.email}
              />
              {formik.touched.email && formik.errors.email ? <small className="form-text text-danger">{formik.errors.email}</small>:null}
          </div>
          <div className="form-group col-md-4 mx-auto">
              <label htmlFor="password">Password</label>
              <input
                  className="form-control"
                  id="password"
                  name="password"
                  type="text"
                  onChange={formik.handleChange}
                  onBlur={formik.handleBlur}
                  value={formik.values.password}
              />
              {formik.touched.password && formik.errors.password ? <small className="form-text text-danger">{formik.errors.password}</small>:null}
   
          </div>

          <div className="col-md-4 mx-auto">
        <button type="submit" className="btn btn-primary">Register</button>
        </div>
      </form>
    );
  };
   
  export default RegisterScreen;

我做错了什么？我希望显示“用户已注册”，而不是“请求失败，状态代码为 400”。

Answer 1

您的错误信息将在

error.response.data.message

不在

error.message

在 Axios 中，您可以在 error.response.data

中获取从服务器发送的 json 数据

这里是 link 来处理 axios

的错误

无法显示正确的错误信息

Unable to display the right error message

forms

error-handling

node.js

reactjs

mern