Maison >interface Web >js tutoriel >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.
Pour récupérer des données avec useEffect, vous utilisez généralement le modèle suivant :
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;
Variables d'état :
useEffect Hook :
Chargement et gestion des erreurs :
Fonction asynchrone dans useEffect :
Tableau de dépendances vide ([]):
Gestion des erreurs :
Gestion de l'État :
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 :
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!