javascript - React/Redux - 调度方法 - 返回错误

Question

我目前正在尝试在页面上添加和删除我的项目，但返回错误。

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 开发工具网络选项卡返回的内容:

https://imgur.com/D5OGLpf

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;
 }

Answer 1

基于您的图像 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(...) 中未捕获的任何错误。