绘制列表：rx.foreach

待办列表、评论、商品卡片这类同一种样式反复出现的界面，都是用列表数据渲染出来的。这一课我们用 rx.foreach，把 State 中的列表渲染到界面上。

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 需要传入两样东西。

1. 列表 Var：ListState.items
2. 渲染单个元素的函数：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. 让 render_item 返回 rx.badge(item) 而不是 rx.list.item。同样的数据会以不同的样子呈现。
3. 写一个事件处理器，点击按钮时往 items 里添加水果。答案在第6课。

本课检查清单

• 能说出传给 rx.foreach 的两样东西。
• 明白渲染元素的函数接收到的值为什么是 Var。
• 知道对 State 中的列表要用 rx.foreach，而不是列表推导式。