我正在使用Sping Boot 和React开发一个全栈应用程序，对于以下情况有不同的状态代码和主体：

***凭证错误时：***500

{
    "status": 500,
    "message": "Bad credentials"
}

***存在验证错误时：***422

{
    "status": 422,
    "message": "Validation error. Check 'errors' field for details",
    "errors": [
        {
            "field": "password",
            "message": "size must be between 6 and 100"
        }
    ]
}

我显示错误消息。但是，根据情况，我必须检查响应错误字段或状态代码，我想使用?进行检查，如下所示：

.catch((error) => {
  error.response.data.errors?.map(e => enqueueSnackbar(e.message, "error"))
  enqueueSnackbar(error.response.data.message?, "error");
});

但是我不确定是否有更好的方法来处理这两种不同的错误类型。

**更新：**我还可以在服务方法中实现异常逻辑，但是我不能在服务中使用enqueueSnackbar方法。因为我导出了如下所示的服务方法。您知道如何在其中使用警报方法吗？
登录名.tsx：

import { useSnackbar } from "notistack";
// ...
const Login = () => {

  const { enqueueSnackbar } = useSnackbar();

  const handleSubmit = (event) => {
           // ...
      .catch((error) => {
        enqueueSnackbar(error.response.data.message, { variant: "error" });
      });
  };
    // ...
};

export default Login;

但是当我尝试在服务中使用enqueueSnackbar方法时，我得到“React Hook“useSnackbar”无法在顶层调用。React Hook必须在React函数组件或自定义React Hook函数中调用。”错误。

服务.js：

import axios from "./axios";
import { useSnackbar } from "notistack";

// !!! here I get error
const { enqueueSnackbar } = useSnackbar();

// if the error is fixed, I could use `enqueueSnackbar` in this method 
export const postWithoutAuth = (url, body) => {
  const request = axios.post(url, body);
  return request.then((response) => response.data);
};

// ...