使用 React 和 TypeScript 构建生产力应用中的目标跟踪系统
原文英文，约6400词，阅读约需24分钟。
📝
内容提要
本文讨论了为生产力应用程序构建目标跟踪系统的过程。该系统允许用户设定和跟踪目标，包括设置截止日期、跟踪进度和为目标分配表情符号等功能。文章涵盖了实现细节，包括将目标存储在数据库中、使用React进行前端实现以及应用程序中使用的各种组件和钩子。还包括了显示时间轴、分组目标和编辑/创建目标等系统不同部分的代码片段。
❓
Q&A
目标跟踪系统的主要功能是什么？
目标跟踪系统允许用户设定和跟踪目标，包括设置截止日期、跟踪进度和为目标分配表情符号等功能。
如何在前端实现目标跟踪系统？
前端实现包括两个子页面：一个用于活动目标，另一个用于已完成目标，并使用GoalsViewSelector组件在两者之间切换视图。
目标实体包含哪些属性？
目标实体包含唯一标识符、表情符号、目标名称、状态、截止日期、高级计划、可测量目标的当前值和目标值等属性。
如何存储目标数据？
目标数据存储在DynamoDB中，目标ID作为键，存储在用户项中以便于高效更新。
如何处理目标的截止日期？
用户可以为目标设置截止日期，截止日期可以是特定日期或与用户年龄相关联。
系统如何显示用户的年龄和目标进度？
系统通过时间轴显示用户的年龄和目标进度，用户可以在时间轴上查看目标的状态和截止日期。
🏷️
