Hinzufügen von Hooks

2 Minuten

Sie können den Effect-Hook verwenden, um den Zustand Ihrer Anwendung zu überwachen und Code als Reaktion auf Änderungen auszuführen. Sie registrieren die Funktion, die als Reaktion auf Änderungen ausgeführt werden soll, mithilfe von useEffect.

Szenario

Ihre Anwendung ermöglicht es Benutzern, auf einzelne Zutaten zu tippen, um sie als vorbereitet zu markieren. Wenn einige Elemente noch nicht vorbereitet sind, möchten wir die Meldung Just keep chopping (einfach weiter schneiden) anzeigen. Wenn alle Elemente fertig sind, möchten wir Prep work done! (Die Vorbereitung ist abgeschlossen) anzeigen.

Zum Einrichten dieses Verhaltens fügen Sie ein neues Zustandsobjekt hinzu. Das Objekt ändern Sie mithilfe des Effect-Hooks.

Wichtig

Im Beispiel wird der Zustand in useEffect geändert. useEffect wird standardmäßig immer ausgeführt, wenn ein beliebiges zustandsbehaftetes Objekt geändert wird. Dieses Verhalten kann zu einer Endlosschleife führen. In dieser Schleife werden der Zustand geändert und der Hook ausgeführt, der den Zustand ändert, wodurch der Hook ausgeführt wird, und so weiter.

Zum Vermeiden dieser Endlosschleife können Sie den Abhängigkeitsparameter verwenden, damit useEffect nur ein Objekt überprüft. Dies richten Sie beim Erstellen Ihres Codes ein.

Hinzufügen der neuen Zustandseigenschaft

Öffnen Sie die Datei App.jsx.
Fügen Sie den folgenden Code unter der Zeile TODO: Add new state property ein, um die neue Zustandseigenschaft hinzuzufügen.
```
// TODO: Add new state property
const [ prepared, setPrepared ] = useState(false);
```

Hinzufügen des Listeners für den Effect-Hook

Fügen Sie den folgenden Code unter die Zeile TODO: Add the effect hook ein, um den Listener für den Effect-Hook hinzuzufügen.

// TODO: Add the effect hook
useEffect(() => {
    setPrepared(recipe.ingredients.every(i => i.prepared));
}, [recipe]);

Im Code wird setPrepared verwendet, um prepared zu ändern. Er verwendet die every-Methode, die einen booleschen Wert basierend auf jedem Element zurückgibt, das den festgelegten Kriterien entspricht. In diesem Fall überprüfen Sie, ob alle Zutaten vorbereitet sind. Wenn das nicht der Fall ist, gibt die Methode FALSE zurück.

Der zweite Parameter für useEffect wird auf [recipe] festgelegt. Dadurch wird die Abhängigkeit bereitgestellt, um sicherzustellen, dass der Code nur ausgeführt wird, wenn das Objekt recipe geändert wird.

Hinzufügen der Anzeige

Nun zeigen Sie dem Benutzer die Nachricht an, wenn die Vorbereitungen abgeschlossen sind. Hierzu fügen Sie den folgenden Code unter der Zeile TODO: Add the prep work display ein.

{/* TODO: Add the prep work display */}
{ prepared ? <h2>Prep work done!</h2> : <h2>Just keep chopping.</h2>}

Dadurch wird das Objekt prepared untersucht. Wenn dies der Fall ist, zeigen wir Prep work done! an. Andernfalls wird Just keep chopping angezeigt.

Testen der Seite