Anleitung zum Abrufen und Anzeigen von Daten von der API in React JS

Veröffentlicht: 2024-10-01

Das Abrufen und Anzeigen von Daten von einer API ist eine grundlegende Aufgabe in modernen React-Anwendungen. Mit der Weiterentwicklung von React ist das Abrufen von Daten effizienter geworden und bietet mehrere Methoden zum Senden von HTTP-Anfragen. In dieser Anleitung behandeln wir die Schritte zum Abrufen und Anzeigen von Daten mit React.

Inhaltsverzeichnis

Umschalten

Einrichten des React-Projekts

Bevor Sie sich mit dem API-Abruf befassen, stellen Sie sicher, dass Sie ein React-Projekt eingerichtet haben. Sie können eine erstellen mit

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

Dadurch wird ein neues React-Projekt initialisiert und ein Entwicklungsserver ausgeführt.

️ Schritt für Schritt: Daten in React abrufen

1. Erstellen Sie einen Status zum Speichern von Daten

Verwenden Sie den Hook useState um eine Statusvariable zum Speichern der abgerufenen Daten zu erstellen.

Javascript

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

2. API-Daten mit useEffect abrufen

useEffect Hook von React stellt sicher, dass der Datenabruf erfolgt, wenn die Komponente bereitgestellt wird. Die Funktion fetch() wird verwendet, um Daten von der API abzurufen.

Javascript

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

3. Zeigen Sie die abgerufenen Daten an

Sobald die Daten abgerufen wurden, können sie mit der Methode map() im JSX gerendert werden:

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

️ Verwenden von Axios zum Abrufen von Daten

Obwohl fetch() die native Browser-API ist, bevorzugen viele Entwickler aufgrund ihrer Einfachheit und leistungsstarken Funktionen die Verwendung von Bibliotheken wie Axios . Hier ist ein Beispiel für die Verwendung von Axios:

Axios installieren :

  • npm install axios

Daten abrufen

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

‍ Umgang mit Grenzfällen

  • Ladezustände : Es ist wichtig, einen Ladezustand zu verwalten, während die Daten abgerufen werden.
  • Fehlerbehandlung : Die Implementierung einer ordnungsgemäßen Fehlerbehandlung kann die Benutzererfahrung verbessern.

Beispiel:

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);
});
}, []);

Abschluss

Das Abrufen und Anzeigen von Daten von APIs in React ist für die Erstellung dynamischer Webanwendungen unerlässlich. Unabhängig davon, ob die fetch() -API oder eine Bibliothek wie Axios verwendet wird, umfasst der Prozess die Definition eines Status zum Speichern von Daten, das Senden der Anforderung und das Rendern der Ergebnisse. Wenn Sie diese Schritte verstehen und Randfälle wie Laden und Fehler behandeln, können Sie reaktionsfähige, datengesteuerte Apps effizient erstellen.

Häufig gestellte Fragen

1. Wie richte ich ein React-Projekt ein, um mit dem Abrufen von API-Daten zu beginnen?

Führen Sie die folgenden Befehle aus, um ein React-Projekt einzurichten:

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

Dadurch wird das Projekt initialisiert und ein Entwicklungsserver gestartet.

2. Wie speichere ich abgerufene Daten in React?

Sie können abgerufene Daten mit dem useState Hook speichern. Beispiel:

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

3. Wie kann ich Daten in React abrufen, wenn die Komponente bereitgestellt wird?

Verwenden Sie den useEffect Hook, um Daten abzurufen, wenn die Komponente gemountet ist:

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

4. Was ist der Zweck der Verwendung der map()-Methode in React beim Rendern von Daten?

Die Methode map() wird verwendet, um das abgerufene Datenarray zu durchlaufen und jedes Element im JSX zu rendern. Zum Beispiel:

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

5. Warum sollte ich Axios anstelle der Fetch-API verwenden?

Viele Entwickler bevorzugen Axios, weil es HTTP-Anfragen vereinfacht, mehr Funktionen bietet und ältere Browser konsistenter unterstützt.

6. Wie installiere ich Axios in meinem React-Projekt?

Um Axios zu installieren, führen Sie Folgendes aus:

npm install axios

7. Wie rufe ich Daten mit Axios in React ab?

Mit Axios können Sie Daten wie folgt abrufen:

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

8. Wie kann ich beim Abrufen von Daten in React mit Ladezuständen umgehen?

Sie können Ladezustände verwalten, indem Sie mit useState eine loading erstellen. Zum Beispiel:

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

useEffect ( () => {
fetch ( 'https://api.example.com/data' )
. dann ( Antwort => Antwort. json ())
. dann ( data => {
setData (Daten);
setLoading ( false );
});
}, []);

9. Wie gehe ich mit Fehlern beim Datenabruf um?

Um Fehler zu behandeln, definieren Sie einen error und aktualisieren Sie ihn, falls die Anfrage fehlschlägt:

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

useEffect ( () => {
fetch ( 'https://api.example.com/data' )
. Catch ( Fehler => {
setError (Fehler);
setLoading ( false );
});
}, []);

10. Warum ist es wichtig, Randfälle wie das Laden und Fehler beim API-Abruf zu behandeln?

Durch die Behandlung von Grenzfällen wie Laden und Fehlern wird sichergestellt, dass Benutzer über den aktuellen Status des Datenabrufs informiert sind, und sorgt für ein reibungsloseres Benutzererlebnis in Fällen, in denen der Datenabruf fehlschlägt oder Zeit in Anspruch nimmt.