在反应：未捕获（承诺）类型错误：无法读取未定义的属性“数据”答案

【问题标题】：In react: Uncaught (in promise) TypeError: Cannot read property 'data' of undefined在反应：未捕获（承诺）类型错误：无法读取未定义的属性“数据”
【发布时间】：2019-03-11 20:07:15
【问题描述】：

我正在使用带有 node.js 后端的 react-redux 开发一个 Web 应用程序。我正在努力添加一个页面以将游戏添加到个人资料中。运行此代码时出现错误。

这是我收到错误时它正在使用的操作

export const addGames = (gameData, history) => dispatch => {
  axios
    .post("/api/profile/games", gameData)
    .then(res => history.push("/dashboard"))
    .catch(err =>
      dispatch({
        type: GET_ERRORS,
        payload: err.response.data
      })
    );
};

页面本身加载得很好。只有在调用该操作时才会出错。出错时指向 catch 语句。

通过邮递员进行 API 调用按预期返回，并且不会出错。

我得到的错误是

×
Unhandled Rejection (TypeError): Cannot read property 'data' of undefined
eval
C:\dev\SocialNetworkTutorial\devConnector\client\src\actions\profileActions.js:48:14
  45 | axios
  46 |   .post("/api/profile", profileData)
  47 |   .then(res => history.push("/dashboard"))
> 48 |   .catch(err =>
     |            ^  49 |     dispatch({
  50 |       type: GET_ERRORS,
  51 |       payload: err.response.data

【问题讨论】：

那么实际的错误是什么？
编辑帖子以包含错误
为什么你期望err 有一个response 字段？尝试将其注销并查看可用的内容。它是一个 Error 对象，所以它至少应该有一个 message 字段
尝试使用 JSON.stringify 注销 err 对象，以便您可以看到结构。该错误似乎表明该结构不是您所期望的（err.response.data）。 .catch(err => console.log(JSON.stringify(err)) )

标签： reactjs react-redux

【解决方案1】：

感谢大家的回复。我想到了。我所做的是按照建议控制台记录 err.message，它给了我错误

无法读取未定义的属性“push”

这导致我查看 history.push 部分代码认为历史可能没有正确传递。

我意识到我的 onSubmit 的主要代码

  onSubmit(e) {
    e.preventDefault();

    const gameData = {
      name: this.state.name,
      handle: this.state.handle,
      platform: this.state.platform,
      rank: this.state.rank
    };

    this.props.addGames(gameData, this.props.games);
  }

然后我意识到this.props.addGames(gameData, this.props.games);需要改为this.props.addGames(gameData, this.props.history);

【讨论】：

【解决方案2】：

那么问题是 axios 的 err.response 对象只有在主机返回响应时才会出现，但在 2xx 状态码范围之外。

如果主机在返回响应之前出错，或者如果您的初始请求存在问题，则err.response 属性将不存在，因此err.response.data 将引发异常。

处理错误的最彻底的方法是axios docs...

.catch(function (error) {
  const errorMessage = (()=> {
    if (error.response) {
      // The request was made and the server responded with a status code
      // that falls out of the range of 2xx
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
      return error.response.data;
    } else if (error.request) {
      // The request was made but no response was received
      // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
      // http.ClientRequest in node.js
      console.log(error.request);
      return error.request;
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log('Error', error.message);
      return error.message;
    }
  })();

  dispatch({
    type: GET_ERRORS,
    payload: errorMessage
  })
});

【讨论】：