web-dev-qa-db-fra.com

Où puis-je faire un appel API avec des crochets dans réagit?

En gros, nous faisons des appels API dans la méthode du cycle de vie 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 n’ya plus de composants de classe.

Ma question est la suivante: où devons-nous passer un appel d’API dans un composant fonctionnel avec des points d'ancrage? 

Avons-nous une méthode semblable à celle de componentDidMount()?

javascriptreactjsreact-nativereact-hooks
7
Hemadri Dasari

Lorsque vous utilisez des composants fonctionnels avec l'API hooks, vous pouvez utiliser la méthode useEffect() pour produire des effets secondaires. Chaque fois que l'état est mis à jour à cause de ces effets secondaires, le composant sera rendu de nouveau. 

Exemple tiré de la documentation.

import { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Par exemple, vous pouvez appeler setCount dans une fonction de rappel d'une demande asynchrone. Lorsque le rappel est exécuté, l'état est mis à jour et React rend le composant à nouveau. Aussi de la documentation:

Pointe

Si vous connaissez les méthodes du cycle de vie de la classe React, vous pouvez penser d'utilisationEffect Hook sous la forme componentDidMount, componentDidUpdate et componentWillUnmount combiné.

0
Donny Verduijn