javascript / beginner
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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
1
useEffect(() => {
Registriert einen Seiteneffekt, der ausgeführt wird, nachdem die Komponente gerendert wurde.
2
async function loadUserData() {
Definiert eine innere asynchrone Funktion zur sicheren Ausführung von Promise-basierten Operationen.
3
const data = await response.json();
Wartet auf die Netzwerkantwort und parst den Inhalt als JavaScript-Objekt.
4
}, []);
Übergibt ein leeres Dependency-Array, damit der asynchrone Abruf nur einmal beim Initialisieren ausgeführt wird.