Snippet

Asynchrones Laden von Remote-API-Daten in useEffect

React-Komponenten verwalten asynchrone Operationen wie HTTP-Netzwerkanfragen innerhalb des useEffect-Hooks. Durch die Deklaration einer async-Funktion innerhalb des Effekts können entfernte JSON-Daten geladen werden, ohne den Renderzyklus der Komponente zu blockieren.

snippet.js

javascript

import { useState, useEffect } from 'react';
 
export function UserProfile() {
  const [user, setUser] = useState(null);
 
  useEffect(() => {
    async function loadUserData() {
      const response = await fetch('https://api.example.com/user');
      const data = await response.json();
      setUser(data);
    }
 
    loadUserData();
  }, []);
 
  if (!user) return <p>Loading...</p>;
  return <h2>{user.name}</h2>;
}

react

Erklärung

useEffect(() => {

Registriert einen Seiteneffekt, der ausgeführt wird, nachdem die Komponente gerendert wurde.

async function loadUserData() {

Definiert eine innere asynchrone Funktion zur sicheren Ausführung von Promise-basierten Operationen.

const data = await response.json();

Wartet auf die Netzwerkantwort und parst den Inhalt als JavaScript-Objekt.

}, []);

Übergibt ein leeres Dependency-Array, damit der asynchrone Abruf nur einmal beim Initialisieren ausgeführt wird.

Vorheriges Snippet Nächstes Snippet

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

Asynchrones Laden von Remote-API-Daten in useEffect

Verwandt