今天做的应用，都围绕着状态（State）→ 界面（Var）→ 事件（事件处理器）→ 状态变更这一个循环运转。Reflex 应用无论变得多大，也只是这样的循环变多而已。
| 概念 | 代码中 | 要记住的一句话 |
|---|---|---|
| 组件 | rx.box(子元素, 属性=值) | 位置参数是子元素，关键字参数是属性 |
| 页面 | app.add_page(index, on_load=...) | 一个页面 = 一个函数 |
| State | class State(rx.State) | 必须写类型注解，按会话保存在服务器内存中 |
| Var | State.users.length() | 在界面函数中它不是值，而是表达式 |
| 循环与条件 | rx.foreach、rx.cond | 用来代替 Var 上的 for、if |
| 事件 | @rx.event def add_user(self, ...) | 修改状态的唯一途径，运行的是真正的 Python |
| 表单 | rx.form(on_submit=...) + name= | name 就是 form_data 的键 |
| 受控组件 | open= + on_open_change= | setter 需要自己定义（0.10） |
| computed var | @rx.var def ...() -> 类型 | 由其他状态计算得出的值 |
| 图表 | rx.recharts.bar_chart(data=...) | 数据格式是 list[dict] |
| 症状 | 原因 | 解决方法 |
|---|---|---|
TypeError: object of type '...Var' has no len() | 在界面函数中对 Var 使用了 len() | 改用 .length() |
VarTypeError: Cannot convert Var ... to bool | 对 Var 使用了 if / and / or | 改用 rx.cond(...) |
VarTypeError: Cannot iterate over Var | 对 Var 使用了 for | 改用 rx.foreach(...) |
AttributeError: ... has no attribute 'set_xxx' | 以为有自动生成的 setter（旧资料的写法） | 用 @rx.event 自己定义 setter |
| 点了取消按钮，数据还是被添加了 | 表单中按钮的默认 type 是 submit | 加上 type="button" |
TypeError: __init__() got an unexpected keyword argument | 输入框的 name 与 dataclass 字段名不一致 | 让两者名称完全一致 |
| 对话框打不开 | 只有 open=，没有 on_open_change | 两者成对使用 |
| 图表是空的 | 没有在任何时机填充图表数据 | 注册 on_load，或改用 computed var |
3 个调试习惯
uv run reflex compile --dry 检查一遍。不用启动服务器，就能快速找出界面代码中的语法错误和 Var 错误。print()。事件处理器是在服务器上运行的 Python，所以 print(form_data) 会打印到服务器终端。而界面函数中的 print 只会在应用启动时打印一次。按难度从低到高排列。每道题都会更深入地运用今天学到的某个概念。
rx.icon("trash-2")），点击后删除该客户。提示：像 on_click=lambda: State.delete_user(user.email) 这样传入参数。value= + on_change=（受控组件）连接起来，再把用 computed var 过滤后的列表显示在表格中。试试用 on_change=State.set_search.debounce(300)，让搜索只在停止输入后才执行。rx.toast.error，并且不关闭对话框。Customer 表，在 on_load 中读取，在 add_user 中写入。刷新页面或重启服务器后，客户数据也应该还在。用 uv add "reflex[db]" 安装；在 Reflex 0.10 中，推荐直接使用 SQLModel，而不是 rx.Model。@rx.page(route="/customers/[id]") 这样创建动态路由，添加客户详情页。models.py、state.py、components/、pages/，即使项目规模变大也便于管理。reflex run --env prod 确认生产模式，然后部署到 Reflex Cloud 或自己的服务器（Docker）。rx.Model、rx.App(theme=...) 等，阅读时请先确认版本。订阅新课时和新课程通知
本课程新增课时或推出后续课程时，我们会发邮件通知你。
问答
关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。