Wie verwende ich die Fetch-API in Reactjs?

Verwenden der Fetch-API in ReactJS ist relativ unkompliziert. Hier ist eine einfache Schritt-für-Schritt-Anleitung:

1. Erstellen Sie eine neue React-Komponente für Ihre API-Anruferinnerung. Dies könnte beispielsweise eine Komponente mit dem Namen “FetchData” sein.

```javascript
import React, { useState, useEffect } from ‘react’;

const FetchData = () => { const [data, setData] = useState([]);

useEffect(() => { fetch(‘Ihre-API-URL’) .then((response) => response.json()) .then((data) => setData(data)); }, []); return (

{/* Hier können Sie Ihre Daten anzeigen */}

); };

export default FetchData;
```

In diesem Code:

- Wir importieren drei Funktionen aus dem React-Paket: `React`, `useState` und `useEffect`. `useState` ist ein Haken (Hook), den wir benutzen, um einen Zustand in unserer Komponente zu haben. `useEffect` ist ein anderer Haken, der eine Funktion aufruft, nachdem die Komponente gerendert wurde.

- Wir definieren eine Funktion `FetchData`, die eine Komponente ist. In dieser Funktion definieren wir einen Zustand `data` mit dem anfänglichen Wert eines leeren Array. Dann definieren wir einen Effekt, der die `fetch`-Funktion verwendet, um Daten von einer API zu holen. Die `fetch`-Funktion gibt eine Promise zurück, die zu einem JSON-Objekt aufgelöst wird. Dann setzen wir den Zustand `data` auf dieses JSON-Objekt.

- Schließlich geben wir ein div-Element zurück, in dem wir die von der API abgerufenen Daten anzeigen können. Es ist an dieser Stelle leer, weil dies davon abhängt, was für Daten Sie tatsächlich aus der API abrufen.

2. Geben Sie die URL Ihrer API in der Fetch-Anweisung an.

3. Verarbeiten Sie die Daten so, wie Sie sie benötigen. Sie können eine Methode `.then()` an Ihre Fetch-Anweisung anhängen und die Daten wie erforderlich bearbeiten.

4. Stellen Sie sicher, dass Sie die FetchData-Komponente in einer anderen Komponente rendern, um Ihre API-Daten anzuzeigen. Sie können dies durch Importieren von FetchData und dann durch Verwenden als JSX-Tag tun, wie zum Beispiel ``.

Vergessen Sie nicht das Error-Handling oder Loading States zu implementieren, dies ist ein einfaches Beispiel, das eine grundlegende Nutzung zeigt.