リストを描く：rx.foreach

ToDoリスト、コメント、商品カードのように、同じ形が何度も繰り返される画面はリストのデータから描きます。この回では、Stateにあるリストを画面に描くrx.foreachを使います。

3-1. rx.foreachでリストを描く (3分)

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),
    )

rx.foreachには2つのものを渡します。

1. リストのVar：ListState.items
2. 項目を1つ描く関数：render_item。かっこを付けずに、関数そのものを渡します。

Reflexがリストの項目ごとにrender_itemを適用して、コンポーネントを作ります。あとでリストに項目が追加されたり削除されたりすると、画面のリストも一緒に変わります。これは6限目のフルーツバスケットで実際に確かめます。

3-2. itemは文字列ではなくVar (2分)

render_itemが受け取るitemの型が、strではなくrx.Var[str]になっている点が重要です。

• render_itemも画面の関数なので、アプリの起動時に一度だけ実行されます。その時点ではリストに何が入るかわからないため、itemは「あとで値が入る場所」を指すVarになっています。
• そのため、len(item)のようなPythonの組み込み関数は使えません。代わりに、ReflexがVar用に用意しているVar演算を使います。item.length()は文字数、item.upper()は大文字に変換した値です。これも4限目のテーマです。

Pythonのリスト内包表記[rx.list.item(i) for i in ListState.items]も、同じ理由で動きません。Stateのリストを繰り返し処理するときは、常にrx.foreachを使います。

練習問題

1. itemsにフルーツをあと2つ追加して、画面に表示されるか確かめてみましょう。
2. render_itemがrx.list.itemの代わりにrx.badge(item)を返すように変えてみましょう。同じデータが違う見た目で描かれます。
3. ボタンを押すとitemsにフルーツを追加するイベントハンドラを作ってみましょう。答えは6限目にあります。

この回のチェックリスト

• rx.foreachに渡す2つのものを説明できる。
• 項目を描く関数が受け取る値がVarである理由がわかる。
• Stateのリストにはリスト内包表記ではなくrx.foreachを使うことがわかる。