javascript / intermediate
Snippet
Relationale Zustandsindizierung mit JavaScript-Maps in React
Bei der Verwaltung normalisierter Datenstrukturen im React-Zustand ermöglicht das native JavaScript `Map`-Objekt O(1)-Zugriffe und bewahrt die Einfügereihenfolge. Da der React-Zustand Unveränderlichkeit verlangt, wird die Map beim Aktualisieren über `new Map(prevMap)` geklont, bevor Werte modifiziert werden.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import { useState } from 'react';export function UserDirectory({ initialUsers }) {const [usersById, setUsersById] = useState(() =>new Map(initialUsers.map(user => [user.id, user])));const updateRole = (userId, newRole) => {setUsersById(prevMap => {const user = prevMap.get(userId);if (!user || user.role === newRole) return prevMap;const nextMap = new Map(prevMap);nextMap.set(userId, { ...user, role: newRole });return nextMap;});};const userList = Array.from(usersById.values());return (<ul>{userList.map(user => (<li key={user.id}>{user.name} ({user.role})<button onClick={() => updateRole(user.id, 'admin')}>Promote</button></li>))}</ul>);}
react
Erklärung
1
new Map(initialUsers.map(user => [user.id, user]))
Erstellt eine indizierte Map aus einem Array von Objekten unter Verwendung der eindeutigen IDs als Schlüssel.
2
const nextMap = new Map(prevMap);
Erzeugt einen flachen Klon der Map-Instanz, um die Unveränderlichkeit des React-Zustands zu gewährleisten.
3
const userList = Array.from(usersById.values());
Wandelt den Werte-Iterator der Map in ein Standard-Array um, um ihn mit `.map()` in JSX zu rendern.