前天晚上我正在给自己的开源项目 SkillLauncher Windows 版本收尾。这是一个帮助开发者快速启动 Claude Code Skills 的桌面工具。功能很简单点击某个技能卡片工具就会自动把技能名字复制到剪贴板同时记录下你使用了哪些技能、用了多少次。测试的时候一切正常。我用了一次「commit」再刷新页面使用记录还在。我又用了「pdf」刷新也还在。完美打包准备发版。第二天早上打开一测——所有的使用记录都不见了。空空如也的列表盯着我的脸那一刻我甚至怀疑自己是不是做梦记错了。问题一消失的数据我打开开发者工具定位到数据文件C:\Users\admin\AppData\Local\com.skillLauncher.app\skill-usage.json文件存在但内容是空的。为什么会这样让我带你看下原来的代码setUsageData((currentData){constnewData{usage:newUsage};// 异步保存(async(){awaitwriteFile(filePath,encoder.encode(JSON.stringify(newData)));})();returnnewData;});发现问题了吗直接覆盖写入没有考虑文件中已有的数据。但这还不是最致命的。更严重的问题在于加载逻辑asyncfunctionloadUsageData(){try{constdataJSON.parse(jsonStr);setUsageData(data);}catch(err){// 任何读取失败都会导致空数据setUsageData({usage:[]});// 危险}}这是一个时序炸弹loadUsageData读取失败可能是临时权限问题、文件被占用、JSON 解析错误内存状态被设为{ usage: [] }用户点击技能触发保存保存逻辑基于空数据计算然后用空数据覆盖文件文件中的有效数据永久丢失教训永远不要用空数据去覆盖可能有数据的文件。解决方案合并写入修复后的代码遵循一个原则先读后写合并而非覆盖。// 保存前先读取现有文件合并后再写入try{const{readFile}awaitimport(tauri-apps/plugin-fs);constexistingContentsawaitreadFile(filePath);constexistingDataJSON.parse(decoder.decode(existingContents));if(existingData?.usage?.length0){// 使用 Map 合并数据新记录覆盖旧的同名记录constmergedMapnewMapstring,SkillUsageRecord();// 先添加现有记录existingData.usage.forEach(record{if(record?.name){mergedMap.set(record.name,record);}});// 再添加新记录自动覆盖同名的newUsage.forEach(record{if(record?.name){mergedMap.set(record.name,record);}});constmergedData{usage:Array.from(mergedMap.values())};awaitwriteFile(filePath,encoder.encode(JSON.stringify(mergedData,null,2)));return;// 合并成功直接返回}}catch(readErr){// 文件不存在或读取失败创建新文件}// 正常保存新文件awaitwriteFile(filePath,encoder.encode(jsonStr));核心思想很简单保存前先读出文件里的旧数据和内存中的新数据合并然后再写回去。这样即使加载时出了问题文件里的数据也不会丢。问题二永远走不进去的 if修复完数据问题我以为可以收工了。结果又发现一个 bug我的「等待加载完成」逻辑从来没生效过。const[loadCompleted,setLoadCompleted]useState(false);constrecordUsageuseCallback(async(skillName:string){// 检查加载状态if(!loadCompleted){console.log(等待加载完成...);// 等待逻辑}// ...},[]);// 空依赖数组这段代码看起来没问题吧但实际运行时loadCompleted永远是false。即使我调用了setLoadCompleted(true)recordUsage函数里读到的还是false。这就是经典的React 闭包陷阱。为什么会这样useCallback的依赖数组为空时回调函数只在组件挂载时创建一次// 组件挂载时loadCompleted falseconstrecordUsageuseCallback((){console.log(loadCompleted);// 闭包捕获了 false},[]);// 空依赖永不更新// 即使后来 setLoadCompleted(true)// recordUsage 内部的 loadCompleted 仍然是 falseJavaScript 闭包捕获的是变量值而非变量引用。这就像你拍了一张照片之后无论被拍摄的人怎么换衣服照片里的样子永远不会变。解决方案useRef最简单的修复方式是用useRef// useRef 返回的对象在整个组件生命周期内保持不变constloadCompletedRefuseRef(false);// 修改值通过 .currentloadCompletedRef.currenttrue;// useCallback 内部访问 .currentconstrecordUsageuseCallback(async(skillName:string){if(!loadCompletedRef.current){// 总是获取最新值// 等待逻辑}},[]);useRef返回的是一个可变对象{ current: ... }。对象的引用在闭包中保持不变但通过.current访问的始终是最新值。这就像拍了一张视频而不是照片内容会实时更新。总结这两个问题花了我大半夜时间但也总结出一些经验数据持久化最佳实践先读后写保存前读取现有数据合并后再写入防御性检查验证数据格式避免用空数据覆盖错误恢复写入失败时保留原有数据React Hooks 避坑指南场景问题解决方案useCallback中变量值过期空依赖数组导致闭包捕获初始值使用useRefsetInterval中 state 过期定时器回调捕获初始 state使用 useRef事件监听器中 state 过期监听器闭包捕获旧值每次更新时重新添加监听器其实这些都不是什么高深的技巧只是在写代码时多想一步如果这里出错了会发生什么开源项目 SkillLauncher 已经发布欢迎体验https://github.com/gxj1134506645/skillLauncher-windows欢迎关注公众号 FishTech Notes一块交流使用心得