Listen zeichnen: rx.foreach

Oberflächen, in denen sich dieselbe Form immer wieder wiederholt, etwa To-do-Listen, Kommentare oder Produktkarten, zeichnest du aus Listendaten. In dieser Lektion verwendest du rx.foreach, um eine Liste aus dem State auf der Seite darzustellen.

3-1. Listen mit rx.foreach zeichnen (3 Min.)

class ListState(rx.State):
    items: list[str] = ["Apple", "Banana", "Cherry"]


def render_item(item: rx.Var[str]):
    # Render a single item.
    # Note that item here is a Var, not a str!
    return rx.list.item(item)


def show_fruits():
    return rx.list.unordered(
        rx.foreach(ListState.items, render_item),
    )

An rx.foreach übergibst du zwei Dinge.

1. Eine Listen-Var: ListState.items
2. Eine Funktion, die einen einzelnen Eintrag zeichnet: render_item. Du übergibst die Funktion selbst, also ohne Klammern.

Reflex wendet render_item auf jeden Eintrag der Liste an und erzeugt daraus Komponenten. Kommen später Einträge hinzu oder fallen weg, ändert sich die Liste auf der Seite mit. Das siehst du in Lektion 6 beim Obstkorb selbst.

3-2. item ist kein String, sondern eine Var (2 Min.)

Wichtig ist: Das item, das render_item entgegennimmt, hat nicht den Typ str, sondern rx.Var[str].

• Auch render_item ist eine UI-Funktion und läuft nur einmal beim Start der App. Zu diesem Zeitpunkt ist noch unbekannt, was in der Liste stehen wird, also ist item eine Var, die auf einen „später eingesetzten Wert“ zeigt.
• Deshalb kannst du keine eingebauten Python-Funktionen wie len(item) verwenden. Stattdessen nutzt du die Var-Operationen, die Reflex für Vars bereitstellt: item.length() liefert die Anzahl der Zeichen, item.upper() den Wert in Großbuchstaben. Auch das ist Thema von Lektion 4.

Aus demselben Grund funktioniert auch die Python-List-Comprehension [rx.list.item(i) for i in ListState.items] nicht. Um über eine Liste im State zu iterieren, nimmst du immer rx.foreach.

Übungen

1. Füge items zwei weitere Obstsorten hinzu und prüfe, ob sie auf der Seite erscheinen.
2. Lass render_item statt rx.list.item ein rx.badge(item) zurückgeben. Dieselben Daten werden dann in anderer Form dargestellt.
3. Schreib einen Event-Handler, der per Button-Klick eine Obstsorte zu items hinzufügt. Die Lösung findest du in Lektion 6.

Checkliste zu dieser Lektion

• Ich kann die zwei Dinge nennen, die ich an rx.foreach übergebe.
• Ich weiß, warum die Funktion, die einen Eintrag zeichnet, eine Var entgegennimmt.
• Ich weiß, dass ich für Listen im State rx.foreach statt einer List-Comprehension verwende.