В реакции: Uncaught (в обещании) TypeError: Невозможно прочитать свойство 'data' из неопределенного

Question

Я работаю над веб-приложением, использующим реактив-редукс с бэкэндом node.js. Я работал над добавлением страницы, чтобы добавить игры в профиль. Я получаю сообщение об ошибке при запуске этого кода.

Это действие, которое оно использует, когда я получаю сообщение об ошибке

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

Answer 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);

Answer 2

Тогда проблема в том, что объект err.response axios будет присутствовать только в том случае, если хост возвращает ответ , но находится вне диапазона кода состояния 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
  })
});