Sichere Status-Updates mit funktionalen Updates

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
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

setCount(prev => prev + 1);

Übergibt eine Callback-Funktion, die den neuesten ausstehenden Status als Argument erhält.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Fortgeschrittene →

Verwandt

Aus deiner Bibliothek