开发小记-开发中的小随笔

1. josn字符串转换JSON.stringify(data) 直接这样转会是一整行的字符串。JSON.stringify(data, null, 2); 这样转就会转成格式化的换行的标准json字符串方便展示diff2. 毫秒时间戳转换需要将字符串‘2025-04-01’转换为整型时间戳类似1744041600:秒级时间戳第一种Math.floor(new Date(createTime?.[0]).getTime() / 1000)第二种moment(createTime?.[1]).unix()毫秒级时间戳用秒级*1000:new Date(createTime?.[0]).getTime()moment(createTime?.[1]).unix()*10003. 修改不可变数组中元素对象嵌套的数组失败oneApiMap: [ { api: master, screenApi: [{}, {}] } ] // 需修改其中的screenApi // 这样写screenApi是没办法修改成功的 const oneApiMapCopy [...oneApiMap]; // const oneApiMapCopy是不可变的 oneApiMapCopy[0].screenApi list?.slice(0, 50); // 改成如下使用扩展运算符修改不可变数组中对象的数组 const oneApiMapCopy [...oneApiMap]; oneApiMapCopy[0] {...oneApiMapCopy[0], screenApi: [...list?.slice(0, 50)]}4. 接口传参中文会被转义utf8用decodeURIComponent方法包裹参数filters: decodeURIComponent(queryString.stringify(omitBy( { kind: Template, metadata.name: serviceName, category: type all ? null : type, }, isEmpty, )).replace(, ,)),5. 阻止promise内部执行直接定义这个方法会导致方法直接被调用每次页面渲染都会重复调用const queryConfigRevisionDetail (revision: string) apiGetRequest(/api/v1/configrevisions/${revision}, { project: appName, labels[cloud]: main, labels[env]: diffEnv || defaultEnv, }, )为了在需要的时候再调用queryConfigRevisionDetail函数并且阻止其内部的 Promise 立即执行可以将该函数封装在一个返回函数的函数中。这样你就可以控制何时实际发起 API 请求。const queryConfigRevisionDetail (revision: string) { return () apiGetRequest(/api/v1/configrevisions/${revision}, { project: appName, labels[cloud]: main, labels[env]: diffEnv || defaultEnv, }, )}6. 深拷贝如果直接将一个对象赋值给另一个对象如{ draftConfig: {...latestConfig} }确实会创建一个新的对象。但是如果latestConfig内部包含可变的数据结构比如数组或另一个对象那么即使使用了扩展运算符...来浅拷贝latestConfig到draftConfig这些内部的可变数据结构仍然会被两者共享。因此对其中一个进行修改可能会影响另一个。为了避免这种情况确保深层复制整个对象是一个好的做法。你可以使用JSON的序列化和反序列化方法来实现深拷贝或者利用一些库如lodash提供的cloneDeep()函数来进行深度克隆。// 使用JSON这种方法简单易行但需要注意的是它不能处理函数和循环引用的对象。 setState({ draftConfig: JSON.parse(JSON.stringify(latestConfig)) }); // 使用 lodash 库 setState({ draftConfig: cloneDeep(latestConfig) });7. TypeError: Cannot assign to read only propertyconst newValue { ...configs }; set(newValue, spec.tolerations, tolerations);问题的根本原因是configs对象或其嵌套属性是只读的不可扩展或冻结。即使通过{ ...configs }创建了一个浅拷贝的新对象嵌套属性仍然可能继承了原始对象的只读特性。解决深拷贝整个对象const newValue cloneDeep(configs) ?? {}; set(newValue, spec.tolerations, tolerations);8. 部署预发一直失败任务超时测试部署 jiuzhou的包体积优化 到预发一直失败但没有日志报告具体错误原因。webpack-bundle-analyzer会起一个本地server所以一直不会停导致雨燕部署任务超时从而失败。9. 页面一直在反复刷新在package.json的执行命令中添加HMRnone10. tnpm install 报错尝试删除 node_modules 文件夹并重新运行 tnpm install 命令rm -rf node_modules npm install11. vscode复制粘贴后光标不正常的问题如果你在Visual Studio Code中遇到复制粘贴后光标行为不正常的问题如变成粗光标、下划线无法输入等这可能是由于某些插件影响所致。一个常见的原因是启用了Vim插件。Vim插件会改变VSCode的默认编辑模式使得常规的编辑操作如使用箭头键移动光标、插入文本等行为不同于标准的编辑器模式。解决禁用Vim插件12. 某个页面一直加载不出来必须点击检查中的Network-fast 3G才能正常加载请求渲染页面safari正常打开google打开其他网页也正常找不到原因可能是在调试时点了network的某个设置这时可以对google恢复默认设置。这不会丢失保存的书签和安装的扩展。13. typescript-fsa安装了该模块依然提示找不到清除缓存重新运行一般就好了特别是 cloudIDE不稳定:rm -rf node_modules/.cache src/.umi src/.umi-production 清除缓存重启服务还是不行就试试配置config.ts extraBabelIncludes: [typescript-fsa]14. 线上有问题但是线上同一分支在本地运行代理没问题这可能是线上某个依赖包更新了本地删除node_modules .umirm -rf node_modules/.cache src/.umi src/.umi-production重新安装依赖tnpm install就能复现问题15. 引用的文件全都提示报错- 在 VSCode 中按 CmdShiftP → 输入 TypeScript: Restart TS Server- 如果还是报错按 CmdShiftP → 输入 Developer: Reload Window- 如果依然报错关闭 VSCode 后删除项目下的 .umi 目录然后重新打开 VSCode 并执行 npx bigfish dev 让 .umi 重新生成16. TypeScript报错解决出现无法复现的 ts 错误请先确定一下 vscode / cloudide 使用的 ts 版本比如如下一个错误 王琦 的 cloudide 里面提示说 ProColumns 的定义找不到。但是在 迫风 本地的 vscode 里面就没有这个错误。debug 后发现原因是王琦同学的 cloudide 使用的 vscode 版本比较低3.7而ant-design/pro-tables使用了 3.8 的新语法import type。下图展示了王琦同学使用的版本为了更改编辑器使用的 ts 版本请点击右下角的那个版本号然后在提示框中选择最新的版本