Utiliser useEffect pour récupérer des données dans React

Utiliser useEffect pour récupérer des données dans React

Dans React, le hook useEffect est couramment utilisé pour effectuer des effets secondaires dans les composants fonctionnels. La récupération de données à partir d'une API ou d'un serveur est l'un des effets secondaires les plus courants, et useEffect facilite la gestion de la récupération de données dans vos composants. Vous trouverez ci-dessous une explication détaillée et un exemple de la façon d'utiliser useEffect pour récupérer des données dans un composant fonctionnel React.

1. Configuration de base

Pour récupérer des données avec useEffect, vous utilisez généralement le modèle suivant :

• Utilisez useEffect pour déclencher la demande de récupération lorsque le composant est monté ou mis à jour.
• Stockez les données récupérées dans l'état du composant à l'aide du hook useState.
• Gérez les états de chargement et d'erreur pour améliorer l'expérience utilisateur.

2. Exemple de récupération de données avec useEffect

Voici un exemple qui montre comment récupérer des données à partir d'une API à l'aide de useEffect et useState :

import React, { useState, useEffect } from 'react';

const DataFetchingComponent = () => {
  // State variables to store data, loading status, and errors
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Using useEffect to fetch data
  useEffect(() => {
    // Define the function for fetching data
    const fetchData = async () => {
      try {
        // Start by setting loading state to true
        setLoading(true);

        // Make the fetch request
        const response = await fetch('https://api.example.com/data');

        // Check if the response is ok (status code 200-299)
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }

        // Parse the JSON data
        const result = await response.json();

        // Update the state with the fetched data
        setData(result);
      } catch (error) {
        // Handle errors and set the error state
        setError(error.message);
      } finally {
        // Set loading to false once the request is complete
        setLoading(false);
      }
    };

    // Call the fetchData function
    fetchData();
  }, []); // Empty dependency array means this effect runs once when the component mounts

  // Conditionally render the UI based on loading, error, and data
  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <div>
      <h1>Data Fetching Example</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default DataFetchingComponent;

3. Découpe du Code :

• Variables d'état :

  • data : stocke les données récupérées une fois qu'elles ont été récupérées avec succès.
  • chargement : un état booléen pour savoir si les données sont toujours en cours de récupération.
  • error : stocke tous les messages d'erreur qui se produisent pendant le processus de récupération.

• useEffect Hook :

  • Nous définissons une fonction asynchrone fetchData dans le hook useEffect.
  • fetchData est appelé immédiatement lors du montage du composant car le tableau de dépendances [] est vide.
  • Dans fetchData, nous effectuons un appel API en utilisant la méthode fetch(). Après avoir récupéré les données, nous vérifions les erreurs (par exemple, les réponses non-200) et mettons à jour l'état en conséquence.

• Chargement et gestion des erreurs :

  • Le composant affiche initialement un message "Chargement..." pendant que la demande de récupération est en cours.
  • Si une erreur se produit lors de la récupération, le message d'erreur s'affiche.
  • Une fois les données récupérées avec succès, elles sont affichées dans une liste.

4. Points clés à retenir :

• Fonction asynchrone dans useEffect :

  • useEffect lui-même ne peut pas être marqué comme asynchrone, mais vous pouvez définir une fonction asynchrone à l'intérieur de l'effet et l'appeler.

• Tableau de dépendances vide ([]):

  • Lorsque le tableau de dépendances est vide, l'effet ne s'exécute qu'une seule fois après le rendu initial, imitant le comportement de composantDidMount dans les composants de classe.

• Gestion des erreurs :

  • Il est important de gérer les erreurs pour garantir que l'application ne plante pas ou ne se comporte pas de manière inattendue en cas d'échec de la récupération.

• Gestion de l'État :

  • L'utilisation de useState pour gérer les états de chargement, de données et d'erreur facilite la gestion et l'affichage de l'interface utilisateur en conséquence.

5. Modèles courants avec useEffect pour la récupération de données

Récupération de données lors d'un clic sur un bouton (déclenchement de l'effet manuellement)

Parfois, vous ne souhaiterez peut-être pas récupérer les données lors du montage du composant, mais plutôt en fonction de l'interaction de l'utilisateur, comme cliquer sur un bouton. Dans ce cas, vous pouvez déclencher useEffect en mettant à jour une variable d'état à partir d'un gestionnaire d'événements.

import React, { useState, useEffect } from 'react';

const DataFetchingComponent = () => {
  // State variables to store data, loading status, and errors
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Using useEffect to fetch data
  useEffect(() => {
    // Define the function for fetching data
    const fetchData = async () => {
      try {
        // Start by setting loading state to true
        setLoading(true);

        // Make the fetch request
        const response = await fetch('https://api.example.com/data');

        // Check if the response is ok (status code 200-299)
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }

        // Parse the JSON data
        const result = await response.json();

        // Update the state with the fetched data
        setData(result);
      } catch (error) {
        // Handle errors and set the error state
        setError(error.message);
      } finally {
        // Set loading to false once the request is complete
        setLoading(false);
      }
    };

    // Call the fetchData function
    fetchData();
  }, []); // Empty dependency array means this effect runs once when the component mounts

  // Conditionally render the UI based on loading, error, and data
  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <div>
      <h1>Data Fetching Example</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default DataFetchingComponent;

Dans cet exemple :

• Les données ne sont récupérées qu'après avoir cliqué sur le bouton (setFetchDataFlag(true)).
• useEffect écoute les modifications apportées à l'état fetchDataFlag et déclenche la récupération lorsqu'il est mis à jour.

6. Conclusion

Utiliser useEffect pour récupérer des données dans React est un moyen efficace et propre de gérer les effets secondaires. En le combinant avec useState, vous pouvez gérer la récupération de données, les états de chargement et la gestion des erreurs dans vos composants fonctionnels. N'oubliez jamais de gérer les erreurs et les cas extrêmes pour garantir que votre application offre une bonne expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!