Claude Code React useEffect 技能｜用 key 重置表单状态
EnglishClaude Code 安装步骤
- 从固定版本 GitHub 工作副本获取完整的 `cli-tool/components/skills/development/react-useeffect` 目录。
- 将目录放入目标项目的 `.claude/skills/`，确认 `.claude/skills/react-useeffect/SKILL.md` 存在，再从项目根目录启动 Claude Code 并输入 `/react-useeffect`。
中文摘要
检查组件何时需要与外部系统同步，并用 React 的 `key` 让切换编辑对象时重新初始化局部状态。
SKILL.md 中文导读
可复现示例
编辑 `book-a` 时在备注输入草稿，然后切换到 `book-b`。请用组件 `key` 表达编辑会话边界。工作步骤
- 先确认状态归属于当前记录还是跨记录共享。属于当前记录时，选择稳定记录 ID 作为编辑表单的 `key`。
- 从记录 A 切到 B 并核对默认值。再用一次同一记录的重新渲染检查草稿是否保留。
验收方法
切换后显示 B 的初始备注，同一个 ID 触发普通渲染时仍保留当前草稿。
GitHub 原文 · 更新日期
适用环境
使用有现成测试的 React 项目。示例需要两个独立记录以及含本地草稿状态的编辑表单。
常见问题
什么情况下仍需要 useEffect？
组件需要订阅外部系统、同步第三方控件或处理其他外部副作用时，可以使用带清理逻辑的 Effect。