Блог

Главная - Вопросы по программированию - Как мне исправить ошибку uncaught in promise в react с помощью typescript при выполнении post-запроса axios?

Как мне исправить ошибку uncaught in promise в react с помощью typescript при выполнении post-запроса axios?

#reactjs #typescript #axios

#reactjs #typescript #axios

Вопрос:

Это мой .tsx файл для добавления предприятия.

Когда я запускаю программу, я могу ввести ввод, но когда я нажимаю кнопку отправки, ничего не происходит.

В моем приложении есть страница с кнопкой для добавления нового предприятия. При нажатии кнопки добавить предприятие отображается форма с полем ввода для имени и кнопкой отправки. Когда пользователь нажимает кнопку отправить после заполнения формы, это название предприятия должно появиться в таблице enterprise.

 export default class AddEnterprise extends React.Component {
  state = {
    name: '',
  }

  handleChange = event => {
    this.setState({ name: event.target.value });
  }

  handleSubmit = event => {
    event.preventDefault();

    const enterprise = {
      name: this.state.name
    };

    axios.post(`${process.env.PUBLIC_URL}/api/enterprises`, { enterprise })
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }

  render() {
    return (
        <div>
    <form onSubmit={this.handleSubmit}>
      <label>
        Enterprise Name:
        <input type="text" name="name" onChange={this.handleChange} />
      </label>
      <button type="submit">Add</button>
    </form>
  </div>
    )
  }
}

В консоли разработчика я получаю следующую ошибку:

Не удалось загрузить ресурс: сервер ответил со статусом 400 () createError.js:16 Uncaught (в обещании) Ошибка: ошибка запроса с кодом состояния 400 при createError (createError.js:16) при settle (settle.js:17) при XMLHttpRequest.handleLoad (xhr.js:61)

Я новичок в typescript / react и был бы признателен за любую информацию / решение.

Комментарии:

1. uncaught promise — это когда axios.post(...).then(...) , если promise разрешает ошибку, у вас там нет обработчика. Попробуйте это : axios.post(...).then(...).catch(err => console.log(err)) .

Ответ №1:

вы можете перехватить ошибку в axios следующим образом:

 axios({
    ...
}).then((response) => {
    ....
}).catch((error) => {
    if( error.response ){
        console.log(error.response.data); // => the response payload 
    }
});
Метки: