Snippet

Abrufen asynchroner API-Daten beim Laden der Komponente

Asynchrone Operationen wie HTTP-Anfragen sollten innerhalb des useEffect-Hooks ausgelöst werden. Das Deklarieren einer async-Funktion innerhalb des Effekts ermöglicht das sichere Abwarten von Netzwerkantworten und das Speichern im lokalen State.

snippet.js

javascript

import { useState, useEffect } from 'react';
 
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
 
  useEffect(() => {
    async function loadData() {
      const response = await fetch(`https://api.example.com/users/${userId}`);
      const data = await response.json();
      setUser(data);
    }
    loadData();
  }, [userId]);
 
  return <div>{user ? user.name : 'Loading profile...'}</div>;
}

react

Erklärung

const [user, setUser] = useState(null);

Initialisiert eine State-Variable zur Speicherung des geladenen Benutzers mit dem Anfangswert null.

useEffect(() => {

Führt Seiteneffekte aus, wenn die Komponente montiert wird oder sich Abhängigkeiten ändern.

async function loadData() {

Definiert eine innere asynchrone Funktion zur Verarbeitung des Promise-basierten API-Aufrufs.

}, [userId]);

Abhängigkeits-Array, das sicherstellt, dass die Daten bei jeder Änderung von userId neu geladen werden.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Anfänger →

Abrufen asynchroner API-Daten beim Laden der Komponente

Verwandt