React Redux 错误 未处理的拒绝(类型错误)：无法读取未定义的属性'data'

Question

我正在使用带有 react redux 的 axios。当有成功的帖子时，我收到此错误。这是处理 axios 和 redux 错误的正确方法吗？如果没有，请指导我。我的参考链接公理，如何处理错误，公理中的错误处理。如果这个问题看起来很明显，我深表歉意。我是初学者。提前谢谢。

export const landingPageValues=(values)=>{
return dispatch=>{
return axios.post('http://127.0.0.1:8000/mainData',values)
.then(res=>{dispatch(mainpageuploadsuccess(res.data))})
.catch(err=>{dispatch(mainpageuploadfailed(err.response.data.error))})
}
}
export const mainpageuploadsuccess = (data) =>{
return {
type:'MAINPAGE_UPLOAD_SUCCESS',
mainUploadData:data
}
}
export const mainpageuploadfailed = (error) =>{
return {
type:'MAINPAGE_UPLOAD_FAILED',
error
}
}

还原剂

case 'MAINPAGE_UPLOAD_SUCCESS':
const {mainUploadData} = action;
return {
...state,
mainUploadData,
error:false
};
case 'MAINPAGE_UPLOAD_FAILED':
const {error} = action;
return {
...state,
error,
mainUploadData:false
};

Answer 1

在 axios.post 之前删除了 return 关键字

export const landingPageValues=(values)=>{
return dispatch=>{   
axios.post('http://127.0.0.1:8000/mainData',values)
.then(res=>{dispatch(mainpageuploadsuccess(res.data))})
.catch(err=>{dispatch(mainpageuploadfailed(err.response.data.error))}) 
}
}

Answer 2

error对象可能不必包含response键(例如：当它是网络错误时)。

因此，您需要在处理错误之前添加检查。

if (error.response && error.response.data) {
dispatch(mainpageuploadfailed(err.response.data.error));
}  else {
handleErrorsElsewhere(error)
}

Answer 3

你能试试这个吗：

case 'MAINPAGE_UPLOAD_SUCCESS':
const {mainUploadData} = action;
return {
error:false,
...state,
mainUploadData
};
case 'MAINPAGE_UPLOAD_FAILED':
const {error} = action;
return {
mainUploadData:false,
...state,
error,
};

希望它对你有帮助。

Answer 4

检查一次服务器响应。 我的意思是，如果您使用的是 Node JS，请检查响应(如 res.send()) 您发送的将是您的数据到达前端