Tag 17: React useState() und Callback Axios und NetzwerkRequests

React Buttons mit useState()

Alles, was im Frontend dynamisch sein soll, muss mit einem useState() programmiert werden. Dabei werden IMMER eine Variabel und ein Setter in eckigen Klammern mit angegeben!

const [Variabel, Setter] = useState(Initialwert)

1. Button definieren

<button onClick={() => {console.log.("click")}}>Knopf<button/>

Das "click" ist sichtbar im Browser, "Untersuchen"-Ansicht

2. Timer einbauen mit useState()

Die let Variabel funktioniert an dieser Stelle nicht! Man braucht die useState() Funktion. Dieser muss ein Initialwert mitgegeben werden, bei uns: 0.

const[times, setTimes] = useState(0)

3. Funktionen schreiben, um bei jedem Click hochzuzählen bzw. runterzuzählen

function onButtonClickIncrease() { setTimes(times +1) console.log("Click", times) }

function onButtonClickDecrease() { setTimes(times - 1) console.log("Unclick", times) }

4. Return Werte

return (
    <div className="App">
        <p>Hallo</p> // Begrüßung wird angezeigt
        <p>{times}</p> // Count wird angezeigt
        <button onClick={onButtonClickIncrease}>Increase</button>
        <button onClick={onButtonClickDecrease}>Decrease</button>
    </div>
)

React versucht immer nur die Komponente, die sich verändert hat bzw. neu erzeugt wurde zu rendern.

5. Ansicht im Browser (ohne Styling)

React Input mit useState()

<input/> erstellt ein Eingabefeld ohne Funktion und ohne Zugriff auf den getippten Inhalt.

1. Input Feld mit useState() verbinden

const[text, setText] = useState("") speichert die getippten Inhalte ab.

<input value={text}/> verbindet useState() und das Eingabefeld. der Value text ist ein String.

onChange={onTextChange} ruft bei einer Eingabe (onChange , weil sich der Wert im Eingabefeld nun ändert) die Funktion onTextChange auf.

Der gesamte Return sieht aus wie folgt:

return (
    <div className="App">
        <p>{times}</p>
        <input value={text} onChange={onTextChange}/>
    </div>
)

Um Zugriff auf den Setter setText zu erhalten, braucht man eine Funktion mit einem Event.

2. Event einfügen mit einem HTML Input Check

Der Parameter, der mit an die Funktion geliefert wird, ist ein event. Um den richtigen Eventtyp herauszufinden, kann man zunächst den Typ string (oder irgendeinen anderen "falschen" Typ eingeben). Die Fehlermeldung gibt Hinweis auf den korrekten Typ, in diesem Fall <HTMLInputElement>.

function onTextChange(event: ChangeEvent<HTMLInputElement>){ }

3. Werte speichern über den Setter

Website --> untersuchen --> das Dropdown Menü target meint das Input Feld auf der Website. Der Parameter value="" muss hier beachtet werden. Wenn dieser keinen Inhalt hat, muss der Wert noch über einen Setter in die Funktion gespeichert werden.

setText(event.target.value)

Die gesamte Funktion sieht aus wie folgt:

function onTextChange(event: ChangeEvent<HTMLInputElement>){
    setText(event.target.value)
}

React Callback Funktionen

Um Informationen von der App in Komponenten zu übergeben, verwendet man props. Um Informationen von den Komponenten in die App zu übergeben, verwendet man Callback Funktionen. Es handelt sich dabei um ganz normale Funktionen, die von der App in die Komponente übergeben werden und dort im type mit definiert werden.

1. Input Bar auslager in Komponente ActionBar
2. onTextChange Funktion an ActionBar übergeben
3. onTextChange Rückgabewert im Typ ActionBarProps definieren
4. Informationen werden von der ActionBar an die App/ in die onTextChange Funktion zurückgegeben.

Filterfunktion mit einfügen

Es gibt 2 Möglichkeiten:

ODER

Berücksichtigung Groß-/Kleinschreibung

Um jegliche Eingabe im Input-Feld interpretieren zu können, wird die filteredCharacters Konstante angelegt, welche alle Namen und den eingegebenen Text im Input-Feld als Kleinschreibung interpretiert.

Axios und NetzwerkRequests

Um die Daten einer API nicht aufwendig durch Copy & Paste zu erhalten, kann man einen NetzwerkRequest verwenden. In diesem Bespiel wird hierfür die externe Libary "Axios" als Hilfsmittel verwendet.

Um Axios zu installieren gibt man im package.json zunächst "axios" ein, hierauf schlägt IntelliJ einem direkt Axios vor. Anschließend wählt man die oben aufgeführte Version aus.

Hat man dies erfolgreich getan, nutzt man den Terminal um hier mit dem Befehl "npm install axios" axios zu installieren. WICHTIG: zur Sicherheit vorher den "ls" Befehl nutzen, um sicherzustellen, dass man sich im richtigen Ordner befindet (wird doch package.json aufgeführt, ist alles richtig).

Da wir mit axios dynamische Daten speichern möchten, müssen wir auch hiefür ein neues useState() erstellen. Damit der Computer weiß, dass es sich um eine Liste handelt, kann man hier als Initialwert eine leere Liste angeben. Dafür fügt man in die Klammern noch eine leere Liste ein ( useState([]).

Damit die filteredCharacters Methode zudem noch weiß was sie abspeichern soll, wird der useState() Methode noch ein <Character[]> hinzugefügt.

asynchrone und synchrone Netzwerkrequests

Bei synchroner Kommunikation wird erst auf die Antwort gewartet und erst dann die nächsten Schritte ausgeführt, bei asynchroner Kommunikation, wird der Rest auch ausgeführt, bevor die Antwort erhalten wurde. Aus diesem Grund (um das Einfrieren einer Seite zu vermeiden) wird bei NetzwerkRequests immer die asynchrone Kommunikationsform verwendet.

(fertig geschriebene Netzwerkrequest - in diesem Fall mit einem Get-Request)

Durch das setCharacters wird garantiert, dass die Daten anschließend im useState() gespeichert werden. Um diesen Request nur einmal auszuführen und nicht endlos oft, muss zusätzlich eine useEffect() Funktion erstellt werden. Durch den leere Dependency Array als Anfangswert wird die Funktion loadAllCharacters() nun nur ein einziges mal aufgerufen. Genau wie beliebig viele UseState() Funktionen erstellt werden können, können dementsprechend auch beliebig viele useEffect() Funktionen erstellt werden. Sollte der NetzwerkRequest (druch bspw. einen Typo) fehlschlagen, kann man zusätzlich einen .catch einfügen.