Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Herausforderung: Entwicklung Einer Astronomie-App Mit Context | React-Hooks und Context für das Zustandsmanagement
React Mastery

bookHerausforderung: Entwicklung Einer Astronomie-App Mit Context

Aufgabe

In dieser Aufgabe arbeitest du weiterhin an derselben App und fügst eine Filterfunktion hinzu, mit der Benutzer Planeten nach Namen filtern können.

Um die Filterkomponente zu erstellen, muss ein Formular erstellt werden, das den Zustand des Eingabewerts verwaltet. Zusätzlich wird eine Funktion benötigt, die auf Änderungen des Eingabewerts reagiert.

Anweisungen

In der App.jsx:

  1. Initialisierung des Zustands für den Eingabewert mit dem useState-Hook. Setze den Anfangswert auf einen leeren String ("").
  2. Überprüfe im useEffect-Hook die Logik, die die Daten filtert, wenn der Benutzer das Eingabefeld ändert. Entscheide, was in das Abhängigkeitsarray des useEffect-Hooks aufgenommen werden muss, damit dieser bei Bedarf ausgeführt wird.
  3. Befülle die Variable appData mit den korrekten Daten. Die Variable appData repräsentiert das context-Objekt und muss inputValue und handleInputChange für die Filter-Komponente enthalten.

In der Filter.jsx: Zugriff auf die Funktionen inputValue und handleInputChange mit dem useContext-Hook erhalten.

  1. Zur Initialisierung des Zustands den useState-Hook verwenden.
  2. Für den useEffect-Hook inputValue im Abhängigkeitsarray aufnehmen, da die Filterung von der Benutzereingabe abhängt.
  3. Um die Daten für appData zu setzen, planetsinputValue und handleInputChange einbeziehen.
  4. Um auf inputValue und handleInputChange zuzugreifen, den Context verwenden, der als Wert für den useContext-Hook bereitgestellt wird.
War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 12

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Awesome!

Completion rate improved to 2.17

bookHerausforderung: Entwicklung Einer Astronomie-App Mit Context

Swipe um das Menü anzuzeigen

Aufgabe

In dieser Aufgabe arbeitest du weiterhin an derselben App und fügst eine Filterfunktion hinzu, mit der Benutzer Planeten nach Namen filtern können.

Um die Filterkomponente zu erstellen, muss ein Formular erstellt werden, das den Zustand des Eingabewerts verwaltet. Zusätzlich wird eine Funktion benötigt, die auf Änderungen des Eingabewerts reagiert.

Anweisungen

In der App.jsx:

  1. Initialisierung des Zustands für den Eingabewert mit dem useState-Hook. Setze den Anfangswert auf einen leeren String ("").
  2. Überprüfe im useEffect-Hook die Logik, die die Daten filtert, wenn der Benutzer das Eingabefeld ändert. Entscheide, was in das Abhängigkeitsarray des useEffect-Hooks aufgenommen werden muss, damit dieser bei Bedarf ausgeführt wird.
  3. Befülle die Variable appData mit den korrekten Daten. Die Variable appData repräsentiert das context-Objekt und muss inputValue und handleInputChange für die Filter-Komponente enthalten.

In der Filter.jsx: Zugriff auf die Funktionen inputValue und handleInputChange mit dem useContext-Hook erhalten.

  1. Zur Initialisierung des Zustands den useState-Hook verwenden.
  2. Für den useEffect-Hook inputValue im Abhängigkeitsarray aufnehmen, da die Filterung von der Benutzereingabe abhängt.
  3. Um die Daten für appData zu setzen, planetsinputValue und handleInputChange einbeziehen.
  4. Um auf inputValue und handleInputChange zuzugreifen, den Context verwenden, der als Wert für den useContext-Hook bereitgestellt wird.
War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 12
some-alt