Herausforderung: 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
:
- Initialisierung des Zustands für den Eingabewert mit dem
useState
-Hook. Setze den Anfangswert auf einen leeren String (""
). - Überprüfe im
useEffect
-Hook die Logik, die die Daten filtert, wenn der Benutzer das Eingabefeld ändert. Entscheide, was in das Abhängigkeitsarray desuseEffect
-Hooks aufgenommen werden muss, damit dieser bei Bedarf ausgeführt wird. - Befülle die Variable
appData
mit den korrekten Daten. Die VariableappData
repräsentiert dascontext
-Objekt und mussinputValue
undhandleInputChange
für dieFilter
-Komponente enthalten.
In der Filter.jsx
:
Zugriff auf die Funktionen inputValue
und handleInputChange
mit dem useContext
-Hook erhalten.
- Zur Initialisierung des Zustands den
useState
-Hook verwenden. - Für den
useEffect
-HookinputValue
im Abhängigkeitsarray aufnehmen, da die Filterung von der Benutzereingabe abhängt. - Um die Daten für
appData
zu setzen,planets
,inputValue
undhandleInputChange
einbeziehen. - Um auf
inputValue
undhandleInputChange
zuzugreifen, denContext
verwenden, der als Wert für denuseContext
-Hook bereitgestellt wird.
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Awesome!
Completion rate improved to 2.17
Herausforderung: 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
:
- Initialisierung des Zustands für den Eingabewert mit dem
useState
-Hook. Setze den Anfangswert auf einen leeren String (""
). - Überprüfe im
useEffect
-Hook die Logik, die die Daten filtert, wenn der Benutzer das Eingabefeld ändert. Entscheide, was in das Abhängigkeitsarray desuseEffect
-Hooks aufgenommen werden muss, damit dieser bei Bedarf ausgeführt wird. - Befülle die Variable
appData
mit den korrekten Daten. Die VariableappData
repräsentiert dascontext
-Objekt und mussinputValue
undhandleInputChange
für dieFilter
-Komponente enthalten.
In der Filter.jsx
:
Zugriff auf die Funktionen inputValue
und handleInputChange
mit dem useContext
-Hook erhalten.
- Zur Initialisierung des Zustands den
useState
-Hook verwenden. - Für den
useEffect
-HookinputValue
im Abhängigkeitsarray aufnehmen, da die Filterung von der Benutzereingabe abhängt. - Um die Daten für
appData
zu setzen,planets
,inputValue
undhandleInputChange
einbeziehen. - Um auf
inputValue
undhandleInputChange
zuzugreifen, denContext
verwenden, der als Wert für denuseContext
-Hook bereitgestellt wird.
Danke für Ihr Feedback!