React - вызов API после нажатия

Question

В моем приложении React есть кнопка, при нажатии которой я вызываю функцию для выполнения запроса API, однако я вижу ошибку Uncaught (in promise) Error.

Мне интересно, правильно ли я делаю то, что я делаю.

Я использовал useEffect в прошлом, когда страница загружалась для вызова API, но не уверен, как это сделать по нажатию кнопки.

Итак, при рендеринге у меня есть:

<Fab onClick={approveIt}>Go</Fab>

Затем эта функция, которая находится внутри самого компонента функции:

const [success, setSuccess] = React.useState(false);

function approveIt() {

   axios.post(api, {}).then(response => {
      // Simplified - lets just get the response
      console.log(response.status)

      // And set some state
      setSuccess(true);
   });

}

Любая помощь будет оценена.

Спасибо

Answer 1

Возможно, в вашем вызове топора ios произошла ошибка, и вы ее не ловите. Вы можете исправить это так:

  axios.post(api, {})
    .then(response => {
      // Simplified - lets just get the response
      console.log(response.status)

      // And set some state
      setSuccess(true);
    })
    .catch((error) => { console.log(error); })

Answer 2

Подобно оператору try, catch, вы должны добавить .catch к вашему вызову axios.post в случае возникновения ошибки, чтобы ее обработать. Вы можете сделать что-то вроде этого:

axios.post(api, {}).then(response => {
      // Simplified - lets just get the response
      console.log(response.status)

      // And set some state
      setSuccess(true);
   })
   .catch(err => {
      console.log(err);
      setSuccess(false);
   });