Fermer

novembre 26, 2022

Comment récupérer les données de l’API dans ReactJS ?2 minutes de lecture


Nous pouvons récupérer des données en utilisant la méthode Javascript fetch(). L’API Fetch est une nouvelle norme pour les requêtes de serveur avec Promises, elle inclut également des fonctionnalités supplémentaires. Ce blog vous aidera à comprendre l’implémentation de l’API de récupération dans les composants fonctionnels et de classe en parcourant chacun d’eux avec un exemple de code. Commençons –

Considérez l’objet ci-dessous comme un exemple de réponse de l’API :

{
data: [
{ "title": "Di", "date": "22 Oct 2022" },
{ "title": "Diii", "date": "23 Oct 2022" }
]
}

Pour le composant fonctionnel :

Voici les étapes simples –

Étape 1
Importer useState & useEffect

Étape 2
définir des variables d’état pour stocker la réponse de l’API à l’aide de la méthode useState.

Étape 3
Dans la dernière étape, appelez l’API dans la méthode useEffect.

Ci-dessous un exemple:

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

const App = () => {
const [data, setData] = useState([]);
useEffect(() => {
    fetch("https://apidata.com")
      .then(res => res.json())
      .then(
        (result) => {
          setData(result);
        }
      )
}, []);
return (
    <div className=”list”>
    {data.map((item,index) => (
        <div key={index}>
        {item.title} {item.date}
        </div>
    ))}
    </div>
);
};
export default App;

Pour le composant de classe :

Étape 1
Composant d’importation

Étape 2
définir l’état à l’intérieur du constructeur de classe

Étape 3
Dans la dernière étape, appelez l’API à l’intérieur de la méthode componentDidMount.

Ci-dessous un exemple :

import React, { Component } from "react";

class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        data: []
      };
    }
     componentDidMount() {
      fetch("https://apidata.com")
        .then(res => res.json())
        .then(
            (result) => {
            this.setState({
                data: result.data
            });
            }
        )
    }
    render() {
      const { data } = this.state;
      return (
        <div className=”list”>
          {data.map((item,index) => (
            <div key={index}>
              {item.title} {item.date}
            </div>
          ))}
        </div>
      );
    }
  }
  export default App;

TROUVÉ CELA UTILE ? PARTAGEZ-LE




Source link

novembre 26, 2022