开发者问题收集

错误:未捕获(在承诺中)类型错误:无法读取未定义的属性(读取“数据”)

2022-07-04
9491

我正在用 spring boot 和 react 编写应用程序。我正在运行一个服务器,并希望从客户端提交表单。表单应该保存在数据库中。

我填写了表单,它保存在数据库中,但是填写完表单并单击“提交”按钮后,页面应该切换到应用程序的主屏幕,即 /dashboard 地址,但我仍然停留在表单上,​​当我进入 devtools 时,我得到了一个 ERROR : Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'data').

也就是说,应用程序本身可以工作,数据在客户端和服务器之间传输并存储在数据库中。所以问题出在前端,具体来说是在 react 端。该消息还指出了问题所在的具体文件,即文件 projectActions.js

但是,我不太清楚具体是什么问题,我在哪里犯了一个错误,导致提交表单后的页面没有“重新加载”并返回到指定的地址。

下面我发送了错误中引用的类。

我还提供了我使用的包的版本:

"axios": "^0.27.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.2",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1"

projectActions.js

import axios from "axios";
import { GET_ERRORS } from "./types";

export const createProject = (project, history) => async (dispatch) => {
  try {
    const res = await axios.post("http://localhost:8080/api/project", project);
    history.push("/dashboard");
  } catch (error) {
    dispatch({
      type: GET_ERRORS,
      payload: error.response.data,
    });
  }
};
2个回答

您的问题在 catch 块内,您尝试读取 error.response.data ,问题是由于错误上没有 response 属性,它是未定义的,当您尝试读取未定义的 data 时,您将得到此错误。 根据错误类型, error 会有不同的结构。请阅读此文以了解如何处理 axios 错误(您需要安全检查): axios-error-handling

Milos Pavlovic
2022-07-04

问题出在

payload: error.response.data,

如果您确定大多数错误都具有此结构,则可以使用 payload: error?.response?.data 。

请记住,我之前确实没有在错误消息中看到 error.response.data 结构。因此,最好改变处理错误的方式。

Deniz Karadağ
2022-07-04