В react: неперехваченный (в обещании) Ошибка типа: не удается прочитать свойство 'data' неопределенного типа

#reactjs #react-redux

#reactjs #реагировать-redux

Вопрос:

Я работаю над веб-приложением, использующим react-redux с 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 через postman возвращается, как ожидалось, и не выдает ошибки.

ошибка, которую я получаю, это

 ×
Unhandled Rejection (TypeError): Cannot read property 'data' of undefined
eval
C:devSocialNetworkTutorialdevConnectorclientsrcactionsprofileActions.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

1. в чем тогда фактическая ошибка?

2. отредактированный пост, чтобы включить ошибку

3. Почему вы ожидаете, что у err будет response поле? Попробуйте выйти из системы и посмотреть, что доступно. Это объект ошибки, поэтому, как минимум, у него должно быть message поле

4. Попробуйте выйти из объекта err с помощью JSON.stringify, чтобы вы могли видеть структуру. Ошибка, похоже, предполагает, что структура не соответствует вашим ожиданиям (ошибка.response.data). .catch(ошибка => console.log(JSON.stringify(ошибка)) )

Ответ №1:

Спасибо всем за ответ. Я понял это. Что я сделал, так это консольный журнал err.message, как рекомендовано, и это выдало мне ошибку

Не удается прочитать свойство ‘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:

Тогда проблема в том, что 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
  })
});