错误:未捕获(在承诺中)类型错误:无法读取未定义的属性(读取“数据”)
我正在用 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,
});
}
};
您的问题在
catch
块内,您尝试读取
error.response.data
,问题是由于错误上没有
response
属性,它是未定义的,当您尝试读取未定义的
data
时,您将得到此错误。
根据错误类型,
error
会有不同的结构。请阅读此文以了解如何处理 axios 错误(您需要安全检查):
axios-error-handling
问题出在
payload: error.response.data,
如果您确定大多数错误都具有此结构,则可以使用 payload: error?.response?.data 。
请记住,我之前确实没有在错误消息中看到 error.response.data 结构。因此,最好改变处理错误的方式。