2021年9-10月份问题汇总

Aditya2021-10-29开发问题

2021年9-10月份问题汇总

1. 将npm包推送到nexus时出现400 Bad Request

npm ERR! code E400
npm ERR! 400 Bad Request - PUT http:/xxx

解决方案是在package.json加入publishConfig

    {
      ...,
      "publishConfig": {
        "registry": "<linkToNexusRepo>"
      }
    }

2. 中文字符判断(计算字符数)

    function getStrLength(str) { 
      var len = str.length; 
      varreLen = 0; 
      for(var i = 0; i < len; i++) {    
        if (str.charCodeAt(i) >= 0 || str.charCodeAt(i) <= 128) { 
          // 全角  
          reLen += 1; 
        } else { 
          reLen+=2; 
        }
      } 
      return reLen;  
    }

3. 字符串转base64，base64转字符串

JavaScript原生提供两个Base64相关方法

btoa()：字符串或二进制值转为Base64编码
atob()：Base64编码转为原来的编码

4.npmrc在项目中配置多个下载源

默认的第三方包可以用registry指定淘宝的源，需要安装的私有服的源可以用@为前缀进行单独配置安装、这样的好处就是如果项目中依赖不同的私服的依赖包的话可以根据包名的配置进行下载、简直是一劳永逸！

5.数组是否有重复

const checkForDuplocates = (array) => {
    return new Set(array).size !== array.length
  }

Set对象是值的集合。您可以按插入顺序遍历集合的元素。集合中的值只能出现一次；它在Set的集合中是唯一的。

6.TypeError: Cannot read properties of undefined (reading 'coordinateSystem')

一个老项目需要修改一些内容，我简单的修改了下文案就直接构建镜像更新上去了，但出奇的是页面内容一闪而过白屏。

打开控制台：

TypeError: Cannot read properties of undefined (reading 'coordinateSystem')
    at Object.r [as layout] (vendors.de4120eb.async.js:1)
    at n.render (vendors.de4120eb.async.js:1)
    at vendors.de4120eb.async.js:1
    at Array.forEach (<anonymous>)
    at C (vendors.de4120eb.async.js:1)
    at me (vendors.de4120eb.async.js:1)
    at ge (vendors.de4120eb.async.js:1)
    at ne.update (vendors.de4120eb.async.js:1)
    at ne.ProS.ae.setOption (vendors.de4120eb.async.js:1)
    at n.initPie (19.4b173bf2.async.js:1)

我寻思我啥也没改呢咋就坏了呢，于是乎切换成老镜像竟然也嗝屁了，怀疑人生了。

某些图表不支持extent中的某些属性，而你却在extent中给了。比如"xAxis.0.axisLabel.rotate"使维度文字倾斜的属性，像地图、水滴图、饼图等是没有这个属性的，所以报错。

去搜了大量文章后，唯有这篇看起来正常，经过尝试最终找到了问题所在是接口返回饼图配置加了维度文字倾斜的属性。

7. 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清理函数中的所有订阅和异步任务

7.1 出现场景

7.1.1 定时器

const [update, setUpdate] = useState(1);
 useEffect(() => {
    const creatInt = setInterval(() => {    //假设这里写了定时器来更新update
      setUpdate(c => c + 1);
    }, 2000);
return () => {
      clearInterval(creatInt);   //（重点）这里清除掉定时器  
    };
  }, []);

7.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来判断是否渲染组件

7.2 addEventListener

综上所述，我遇到问题是document加上了keydown方法，却没在return的时候移除掉，导致了该问题

useEffect(() => {
  document.addEventListener('keydown', onkeydown);
  return () => {
    document.removeEventListener('keydown', onkeydown)
  }
}, []);

2021年9-10月份问题汇总