SuperAPI AI 工具集

watermelondb

前端与建站

查看项目

更新于 10-15 22:41

技能介绍

用途:该技能覆盖 WatermelonDB 的模型(database/models/)、响应式查询观察,以及确保被观察数据变化时 React 能重新渲染。适用于处理 findAndObserve、query.observe()、withObservables,或任何订阅数据库变更的页面。

主要能力:说明 findAndObserve(id) 会按 ID 取记录并返回 Observable,订阅时立即发射,记录更新或删除时再次发射;模型更新时发射的是同一对象引用(属性已更新),而非新实例,因此用 useState 存原始模型会因 Object.is 相同而不触发重渲染。给出修复方式:订阅单个模型时存包装对象(如 { phrase, _key: result.updatedAt }),每次发射更新为新包装,从而触发重渲染。查询 query.observe() 发射模型数组,结果集变化通常产生新数组引用,直接 setState(results) 即可重渲染;派生数据同理。withObservables(triggerProps, getObservables) 以 props 注入可观察值,每次发射传入新状态对象,因此即使模型引用未变也会重渲染。

使用方式:模型使用 @field、@writer 与静态辅助方法(如 Phrase.findOrCreatePhrase、Lesson.addLesson);观察通过 @nozbe/watermelondb/react 的 useDatabase(),再用 collection.findAndObserve(id) 或 query.observe().subscribe(...);表结构见 database/schema.ts,集合通过 db.collections.get<Model>(TABLE) 访问。路由参数(如 id)通常在 useEffect 中手动订阅,此时用包装模式而非存原始模型。项目示例包括 PhraseDetailScreen、LessonDetailScreen、SetDetailScreen(findAndObserve + 包装)与 AttemptCard(withObservables)。

适用场景与限制:适合需要随数据库变更实时刷新界面的 React 应用,以及排查更新不显示的问题。资料未提供安装命令、版本要求、性能与兼容性细节;具体收费、平台等信息暂未提供。