我目前正在尝试在页面上添加和删除我的项目,但返回错误。
Unhandled rejection (TypeError): Cannot read property data of undefined
pointing to .catch
在下面的代码中。
export const addItem = (item) => (dispatch,
getState) => {
axios
.post('/api/items', item, tokenConfig(getState))
.then(res => dispatch({
type: ADD_ITEM,
payload: res.data
}))
.catch(err => dispatch(returnErrors(err.response.data, err.response.status))
);
};
export const deleteItem = (id) => (dispatch, getState) => {
axios
.delete(`/api/items/${id}`, tokenConfig(getState))
.then(res => dispatch({
type: DELETE_ITEM,
payload: id
}))
.catch(err => dispatch(returnErrors(err.response.data, err.response.status))
);
};
//////////////////////////////////////////////
上面引用的 returnErrors 方法来自这里的另一个文件:
import { GET_ERRORS, CLEAR_ERRORS } from './types';
// RETURN ERRORS
export const returnErrors = (msg, status, id = null) => {
return {
type: GET_ERRORS,
payload: { msg, status, id }
};
};
// CLEAR ERRORS
export const clearErrors = () => {
return {
type: CLEAR_ERRORS
};
};
我在 dispatch(returnErrors (err.response.data, err.response.data));
并返回 undefined
第一个和 uncaught (in promise) cannot read property of undefined
有人告诉我
这实际上意味着您的错误对象没有正确的数据。请查看返回的错误对象。这可能是项目/用户 api 的问题,它应该返回正确的错误对象。
项目 api 路由
router.post('/', auth, (req, res) => {
const newItem = new Item({
name: req.body.name
})
newItem.save().then(item => res.json(item));
});
// DELETE api/items/:id
// Delete an item
// Private
router.delete('/:id', auth, (req, res) => {
Item.findById(req.params.id)
.then(item => item.remove().then(() => res.json({ deleted: true
})))
.catch(err => res.status(404).json({ deleted: false }));
})
不确定数据在哪里未定义。有人看到有什么东西不见了吗?
您可以在此处查看 chrome 开发工具网络选项卡返回的内容:
authActions
// Check token & Load User
// Want to check routes/auth.js for user by id that's included with token
// Going to use asynchronous request, use dispatch
export const loadUser = () => (dispatch, getState) => {
// User loading
dispatch({ type: USER_LOADING });
// Fetch user
axios.get('/api/auth/user', tokenConfig(getState))
.then(res => dispatch({
type: USER_LOADED,
payload: res.data
}))
.catch(err => {
dispatch(returnErrors(err.response.data, err.response.status));
dispatch({
type: AUTH_ERROR
});
});
};
// Register User
export const register = ({ name, email, password }) => dispatch => {
// Headers
const config = {
headers: {
'Content-Type': 'application/json'
}
}
// Request body
const body = JSON.stringify({ name, email, password });
axios.post('/api/users', body, config)
.then(res => dispatch({
type: REGISTER_SUCCESS,
payload: res.data
}))
.catch(err => {
dispatch(returnErrors(err.response.data, err.response.status, 'REGISTER_FAIL'));
dispatch({
type: REGISTER_FAIL
});
});
};
// LogIn
export const login = ({ email, password }) => dispatch => {
// Headers
const config = {
headers: {
'Content-Type': 'application/json'
}
}
// Request body
const body = JSON.stringify({ email, password });
axios.post('/api/auth', body, config)
.then(res => dispatch({
type: LOGIN_SUCCESS,
payload: res.data
}))
.catch(err => {
dispatch(returnErrors(err.response.data, err.response.status,
'LOGIN_FAIL'));
dispatch({
type: LOGIN_FAIL
});
});
};
// LogOut
export const logout = () => {
return {
type: LOGOUT_SUCCESS
};
};
// Setup config/headers and Token
export const tokenConfig = (getState) => {
// Get token from localstorage
const token = getState().auth.token;
// Headers
const config = {
headers: {
"Content-type": "application/json"
}
}
// Check if token exists, add to Headers
if(token) {
config.headers['x-auth=token'] = token;
}
return config;
}
最佳答案
基于您的图像 https://imgur.com/D5OGLpf ,您对 axios.delete('/api/items/${id}
的请求没有到达路由 /api/items/:id
。
为什么我这么说?
响应状态为 401 ( https://imgur.com/D5OGLpf ),表示未授权。路由 router.delete('/:id'
的端点可能受到身份验证中间件或类似的东西的保护。
要解决它,
首先
您需要使用您为 api 设置的方式发出经过身份验证的请求,无论是基本身份验证、oauth[2] 还是您自定义的。
然后
在派发dispatch(returnErrors...
之前,需要检查数据是否存在。
axios
.delete(`/api/items/${id}`, tokenConfig(getState))
.then(res => dispatch({
type: DELETE_ITEM,
payload: id
}))
.catch(err => {
if(error.status === 404) {
// here, you are sure that error.response.data exists
dispatch(returnErrors(err.response.data, err.response.status)
}
else {
// do something else to handle the error
}
})
** 请记住,** 捕获的错误可以是从错误状态 400、500 到您在 .then(...)
中未捕获的任何错误。
关于javascript - React/Redux - 调度方法 - 返回错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55153626/