Où puis-je passer un appel API avec des hooks dans react?

Question

Fondamentalement, nous faisons des appels d'API dans la componentDidMount() dans les composants de la classe React comme ci-dessous

      componentDidMount(){
          //Here we do API call and do setState accordingly
     }

Mais après l'introduction des hooks dans React v16.7.0, il s'agit principalement de composants fonctionnels

Ma requête est la suivante: où devons-nous exactement faire un appel d'API dans un composant fonctionnel avec des crochets?

Avons-nous une méthode similaire comme componentDidMount() ?

Answer 1

Vous pouvez également utiliser use-http comme:

 import useFetch from 'use-http'

function App() {
  // add whatever other options you would add to `fetch` such as headers
  const options = {
    method: 'POST',
    body: {}, // whatever data you want to send
  }

  var [data, loading, error] = useFetch('https://example.com', options)

  // want to use object destructuring? You can do that too
  var { data, loading, error } = useFetch('https://example.com', options)

  if (error) {
    return 'Error!'
  }

  if (loading) {
    return 'Loading!'
  }

  return (
    <code>
      <pre>{data}</pre>
    </code>
  )
}