2022年1月份开发问题汇总
2022年1月份开发问题汇总
- 动态资源下载
- npm connect ECONNREFUSED
- git cherry-pick、reset
- html转pdf导出
- Can’t perform a React state update on an unmounted component
1. 动态资源下载
function download(href, filename='') {
const a = document.createElement('a')
a.download = filename
a.href = href
document.body.appendChild(a)
a.click()
a.remove()
}
2. npm connect ECONNREFUSED
一开始以为是设置了proxy，发现 npm config get proxy 打印也是null，想不通哪里有问题，
最后把 npm config list 打印了发现，原来是http-proxy有设置，母鸡啥时候设置。
取消代理
npm config delete http-proxy
3. git cherry-pick、reset
之前有个改文案的需求，量不少，单独拉出来一个分支，用一次构建完就弃用。
但现在又要再改一次，于是第一次接触了cherry-pick，不禁感叹git强大
git cherry-pick commit-id
但是这玩意第一次用，这样执行了，它直接给推到主分支远程仓储了，很尴尬，于是用到了 reset
git reset --hard head^1
git push origin master --force
本该不用这么复杂，却愣是让我整复杂了
4. html转pdf导出
npm install html2canvas jspdf --save
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default{
install (Vue, options) {
Vue.prototype.getPdf = function (idDom) {
var title = this.htmlTitle // 这里的this指向 调用的组件的data
html2Canvas(document.querySelector('#pdfDom'//idDom), {
allowTaint: true,
useCORS: true, //使用cors从服务器加载图片
}).then(function (canvas) {
let contentWidth = canvas.width
let contentHeight = canvas.height
let pageHeight = contentWidth / 592.28 * 841.89
let leftHeight = contentHeight
let position = 0
//a4纸的尺寸[595.28,841.89]，html 页面生成的 canvas 在pdf中图片的宽高
let imgWidth = 595.28
let imgHeight = 592.28 / contentWidth * contentHeight
let pageData = canvas.toDataURL('image/jpeg', 1.0)
let PDF = new JsPDF('', 'pt', 'a4')//pdf实例的默认参数 （ 'p'纵/'l'横 默认p， 单位 pt ， 纸张大小 A4） 当纵的 改变成横的 时 需交换宽高的数值
if (leftHeight < pageHeight) {
PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
} else {
//超出部分添加下一页
while (leftHeight > 0) {
PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= 841.89
if (leftHeight > 0) {
PDF.addPage()
}
}
}
PDF.save(title + '.pdf') //导出的文件名称
}
)
}
}
}
这套代码是通过html转图片再转pdf的方式实现的，这种方法会遇到几个比较大问题
html2canvas的图片会模糊，scale属性效果有限；
部分ui有问题，需要调试；
分页界限会导致内容截断；
5. Can't perform a React state update on an unmounted component
组件卸载了，但是仍处于渲染数据状态（如：setState，useState），一般写定时器时候会有出现。其他情况也会，只要组件卸载但仍在更新数据时机
Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function
报错提示：无法对未装载的组件执行反应状态更新。这是一个不准的操作，但它表示应用程序内存泄漏。若要修复，请取消useffect清理函数中的所有订阅和异步任务
1.1 出现场景
##### 1.1.1 定时器
const [update, setUpdate] = useState(1);
useEffect(() => {
const creatInt = setInterval(() => { //假设这里写了定时器来更新update
setUpdate(c => c + 1);
}, 2000);
return () => {
clearInterval(creatInt); //（重点）这里清除掉定时器
};
}, []);
1.1.2 useState
useEffect(() => {
let isUnmount = false; //这里插入isUnmount
const fetchDetail = async () => {
const res = await getDetail(detailId);
if (res.code === 0 && !isUnmount) { //加上判断isUnmount才去更新数据渲染组件
setDetail(res.data);
}
};
fetchDetail();
return () => isUnmount = true; //最好return一个isUnmount
}, [detail]);
说明：useEffect相当于class组件的3个生命周期，其中return ()=>{ } 相当于 componentWillUnMount
class类组件：原理同hook在 componentWillUnMount 中设置一个 值true 、false来判断是否渲染组件
1.2 addEventListener
综上所述，我遇到问题是document加上了keydown方法，却没在return的时候移除掉，导致了该问题
useEffect(() => {
document.addEventListener('keydown', onkeydown);
return () => {
document.removeEventListener('keydown', onkeydown)
}
}, []);