好好的井底空间

  Copilot 非复吴下阿蒙。效果可以说非常惊艳了，大概只用了三个小时的时间，就把流程跑通了。但是 AI 时代，0-1 是最简单的，1 之后的工作可就难讲咯！ 附一张概念图，实操一遍后，理解更深刻了：

A cute cartoon cat co-created with GitHub Copilot (Claude 3.7 Sonnet), where I played the role of the human co-pilot😏 Feel free to check out the live demo at https://nice-kitty.vercel.app/ and explore the code at https://github.com/huangyuting-lab/nice-kitty to see how it's implemented. Plus, turns out AI is still only good at creative tasks with high error tolerance. Guess I won't be out of a job just yet!

写一个巨长巨臭又要求各种智能回显的表单，真的写到崩溃…… React 的状态更新为什么要异步执行呢？就算异步，提供一个 async 版的 setState 不行吗？就算不提供，哪怕给个传回调函数的机会呢？非要借助 useEffect，逻辑越是混乱的地方，越容易误触 useEffect，这个 api 到底有什么好啊？只想精准控制，就要设置一个和业务毫无关系的 flag state，不脏吗？ 每到这个时候就会怀念起 Vue 了😓响应式状态同步更新，顺序执行的逻辑代码耦合紧密，遇到实在复杂的场景还可以用 nextTick 打个补丁。React 写到走投无路的时候就只能重构了，看着那个六百多行怎么拆都拆不开的表单真是想死的心都有了…… 留下个场景记录吧！也许哪天变厉害了，回头再来看这个场景，就知道该怎么改了吧！ 1. 调用接口获取一组文件的地址； 2. useState 更新 fileParserList，isParsingList，parseResultList 的状态，将值设为 Array.from({ length : fileUrlList.length }, () => initialValue )； 3. 并发执行文件解析，Promise.all(fileUrlList.map((url, index) => parseFile(index, url)))； 4. 在 parseFile 函数中实现对应文件的 fileParser、isParsing、parseResult 的更新。

被坑了两次，每次费半天力气 debug 到最后发现都是这个问题导致的，甚至开发历程都是一模一样，我真的累…… 时间线： 1. 封装了一个上传 csv 的组件 / 上传图片的组件； 2. 考虑借助 transform 属性实现统一的值转化，格式大概如下： 3. 数月后，产品经理提出扩展需求，字段数组化； 4. 直接使用 <ProFormList /> 包裹； 5. 发现字段修改后无法触发正常的更新； 6. 开启漫长的 debug 历程…… 7. 最后发现 namepath 取值为 ProFormList 的 name，而非实际字段的 name，卒。 解决方案：

 1. 点击这里找到 Extension 文件所在目录。 2. 手动删除这个 Extension 目录。 3. 重启 VS Code。 4. 在插件市场搜索这个 Extension。 5. 下载 VSIX 文件。 6. 安装 VSIX 文件。 7. 视情况勾选 Auto Update。

  啊！我悟到了……