javascript / beginner
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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
1
const [user, setUser] = useState(null);
Initialisiert eine State-Variable zur Speicherung des geladenen Benutzers mit dem Anfangswert null.
2
useEffect(() => {
Führt Seiteneffekte aus, wenn die Komponente montiert wird oder sich Abhängigkeiten ändern.
3
async function loadData() {
Definiert eine innere asynchrone Funktion zur Verarbeitung des Promise-basierten API-Aufrufs.
4
}, [userId]);
Abhängigkeits-Array, das sicherstellt, dass die Daten bei jeder Änderung von userId neu geladen werden.