javascript / intermediate
Snippet
Sichere Status-Updates mit funktionalen Updates
Wenn Sie den Status basierend auf seinem vorherigen Wert aktualisieren, insbesondere in asynchronen Closures, verwenden Sie ein funktionales Update, um sicherzustellen, dass Sie mit der aktuellsten Version des Status arbeiten.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
function Counter() {const [count, setCount] = useState(0);const handleAsyncIncrement = () => {setTimeout(() => {setCount(prev => prev + 1);}, 1000);};return <button onClick={handleAsyncIncrement}>Count: {count}</button>;}
react
Erklärung
1
setCount(prev => prev + 1);
Übergibt eine Callback-Funktion, die den neuesten ausstehenden Status als Argument erhält.