javascript / intermediate
Snippet
Unveränderliche React-State-Aktualisierungen mit ECMAScript 2023 Array-Methoden
Modernes JavaScript bietet nicht-mutierende Array-Methoden wie `toSpliced()` und `toSorted()`. Im Gegensatz zu `splice()` und `sort()` geben diese Methoden eine neue Array-Kopie zurück und verhindern so unbemerkte State-Mutationen in React ohne manuelle Spread-Kopien.
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
import React, { useState } from 'react';export function TodoListManager({ initialItems }) {const [items, setItems] = useState(initialItems);const removeItemByIndex = (index) => {setItems((prev) => prev.toSpliced(index, 1));};const sortItemsByName = () => {setItems((prev) => prev.toSorted((a, b) => a.text.localeCompare(b.text)));};return (<div><button onClick={sortItemsByName}>Sort Alphabetically</button><ul>{items.map((item, index) => (<li key={item.id}>{item.text}<button onClick={() => removeItemByIndex(index)}>Delete</button></li>))}</ul></div>);}
react
Erklärung
1
setItems((prev) => prev.toSpliced(index, 1));
Erstellt eine neue Array-Kopie ohne das Element am angegebenen Index, ohne den vorherigen Zustand zu mutieren.
2
setItems((prev) => prev.toSorted((a, b) => a.text.localeCompare(b.text)));
Gibt eine neue sortierte Array-Instanz zurück, anstatt das bestehende State-Array direkt an Ort und Stelle zu sortieren.