好好的井底空间

写一个巨长巨臭又要求各种智能回显的表单，真的写到崩溃…… 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。