Guide pour récupérer et afficher des données à partir de l'API dans React JS

Publié: 2024-10-01

Récupérer et afficher des données à partir d'une API est une tâche fondamentale dans les applications React modernes. Avec l'évolution de React, la récupération de données est devenue plus simple et offre plusieurs méthodes pour effectuer des requêtes HTTP. Dans ce guide, nous aborderons les étapes pour récupérer et afficher des données à l'aide de React.

Table des matières

Basculer

Configuration du projet React

Avant de vous lancer dans la récupération d'API, assurez-vous d'avoir configuré un projet React. Vous pouvez en créer un en utilisant

  • npx create-react-app my-app
    cd my-app
    npm start

Cela initialise un nouveau projet React et exécute un serveur de développement.

️ Étape par étape : récupérer des données dans React

1. Créer un état pour stocker les données

Utilisez le hook useState pour créer une variable d'état pour stocker les données récupérées.

javascript

  • const [data, setData] = useState([]);

2. Récupérer les données API avec useEffect

Le hook useEffect de React garantit que la récupération des données se produit lors du montage du composant. La fonction fetch() est utilisée pour récupérer les données de l'API.

javascript

  • useEffect(() => {
    fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => setData(data))
    .catch(error => console.error('Error:', error));
    }, []);

3. Afficher les données récupérées

Une fois les données récupérées, elles peuvent être restituées dans le JSX à l'aide de la méthode map() :

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

️ Utiliser Axios pour récupérer des données

Bien que fetch() soit l'API native du navigateur, de nombreux développeurs préfèrent utiliser des bibliothèques comme Axios en raison de sa simplicité et de ses fonctionnalités puissantes. Voici un exemple d'utilisation d'Axios :

Installez Axios :

  • npm install axios

Récupération de données

  • useEffect(() => {
    axios.get('https://api.example.com/data')
    .then(response => setData(response.data))
    .catch(error => console.error('Error:', error));
    }, []);

‍ Gestion des cas extrêmes

  • États de chargement : Il est important de gérer un état de chargement pendant la récupération des données.
  • Gestion des erreurs : la mise en œuvre d'une gestion appropriée des erreurs peut améliorer l'expérience utilisateur.

Exemple:

const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
setData(data);
setLoading(false);
})
.catch(error => {
setError(error);
setLoading(false);
});
}, []);

Conclusion

La récupération et l'affichage des données des API dans React sont essentiels pour créer des applications Web dynamiques. Qu'il s'agisse de l'API fetch() ou d'une bibliothèque comme Axios, le processus implique de définir un état pour stocker les données, d'effectuer la requête et de restituer les résultats. En comprenant ces étapes et en gérant les cas extrêmes tels que le chargement et les erreurs, vous pouvez créer efficacement des applications réactives et basées sur les données.

Foire aux questions

1. Comment configurer un projet React pour commencer à récupérer les données de l'API ?

Pour configurer un projet React, exécutez les commandes suivantes :

npx create-react-app my -app
cd my -app
npm start

Cela initialise le projet et démarre un serveur de développement.

2. Comment stocker les données récupérées dans React ?

Vous pouvez stocker les données récupérées à l'aide du hook useState . Exemple:

const [data, setData] = useState ([]);

3. Comment puis-je récupérer des données dans React lorsque le composant est monté ?

Utilisez le hook useEffect pour récupérer les données lorsque le composant est monté :

useEffect ( () => {
fetch ( 'https://api.example.com/data' )
. then ( response => response. json ())
. then ( data => setData (data))
. catch ( error => console . error ( 'Error:' , error));
}, []);

4. Quel est le but d'utiliser la méthode map() dans React lors du rendu des données ?

La méthode map() est utilisée pour parcourir le tableau de données récupéré et restituer chaque élément dans le JSX. Par exemple:

<ul>
{data. map ( item => (
< li key = {item.id} > {item.name} </ li >
))}
</ul>

5. Pourquoi devrais-je utiliser Axios au lieu de l'API fetch ?

De nombreux développeurs préfèrent Axios car il simplifie les requêtes HTTP, offre plus de fonctionnalités et prend en charge les anciens navigateurs de manière plus cohérente.

6. Comment installer Axios dans mon projet React ?

Pour installer Axios, exécutez :

npm install axios

7. Comment récupérer des données à l'aide d'Axios dans React ?

Avec Axios, vous pouvez récupérer des données comme ceci :

useEffect ( () => {
axios. get ( 'https://api.example.com/data' )
. then ( response => setData (response. data ))
. catch ( error => console . error ( 'Error:' , error));
}, []);

8. Comment puis-je gérer les états de chargement lors de la récupération de données dans React ?

Vous pouvez gérer les états de chargement en créant une variable loading avec useState . Par exemple:

const [loading, setLoading] = useState ( true );

utiliserEffet ( () => {
récupérer ( 'https://api.example.com/data' )
. alors ( réponse => réponse. json ())
. alors ( données => {
setData (données);
setLoading ( faux );
});
}, []);

9. Comment gérer les erreurs lors de la récupération des données ?

Pour gérer les erreurs, définissez un état error et mettez-le à jour en cas d'échec de la requête :

const [error, setError] = useState ( null );

utiliserEffet ( () => {
récupérer ( 'https://api.example.com/data' )
. attraper ( erreur => {
setError (erreur);
setLoading ( faux );
});
}, []);

10. Pourquoi est-il important de gérer les cas extrêmes tels que le chargement et les erreurs lors de la récupération de l'API ?

La gestion des cas extrêmes tels que le chargement et les erreurs garantit que les utilisateurs sont informés de l'état actuel de la récupération des données et offre une expérience utilisateur plus fluide dans les cas où la récupération des données échoue ou prend du temps.