通过 Axios/Express 返回错误值到 React App

Question

我有一个handleSubmit函数可以从后端获取数据作为更大组件的一部分。当后端出现故障时，我想将错误信息发送到我的 redux 存储和/或本地组件，但我无法这样做。

该handleSubmit函数看起来像这样（它使用了正确连接的 React 钩子。如果有用，可以发布完整的组件）：

const handleSubmit = async (e, { dataSource, filter, filterTarget }) => {

    e.preventDefault();
    setIsLoading(true);
    setErrorValue(null);
    setError(false);

    const token = localStorage.JWT_TOKEN;
    const link = filterTarget === "Identifier" ? `http://localhost:8081/api/${dataSource}/${filter}`: `http://localhost:8081/api/${dataSource}?filter=${filter}&filterTarget=${filterTarget}`;

    try {
        let data = await axios.get(link, { headers: { authorization: token }});
        props.setData(data);
        setError(false);
        setIsLoading(false);
    } catch (err){           
        setErrorValue(err.message);
        setError(true);
        setIsLoading(false);
    };
};

我故意通过表单提出错误的请求，这将在我的后端触发错误。这些是通过我的自定义 Express 中间件函数处理的，它看起来像这样（一旦我让这个框架工作，我会添加更多）：

  handleOtherError: (error, req, res, next) => { // Final custom error handler, with no conditions. No need to call next() here.
      console.log("This error handler is firing!");
      return res.status(500).json({ 
          message: error.message,
          type: "ServerError"
      });
    }

我知道这个函数正在触发，因为该console.log语句出现在我的服务器上，如果我更改状态代码，那么我的 Google Chrome 控制台前端的状态代码错误也会发生。

事实上，如果我转到网络选项卡，就会为我的请求显示正确的错误信息。这是我提出错误请求的视频：

但是，当我尝试访问err.message我的前端时，我无法这样做。handleSubmit 函数的 try/catch 处理程序中的 err.message 只给了我Request failed with status code XXX

我究竟做错了什么？

Answer 1

见https://github.com/axios/axios#handling-errors

您可以使用err.response.data.message，而不是来访问响应err.message。