蓁祎家进步中

# 一些错误提示

返回：前端

# Cannot use import statement outside a module

node 早先只支持 CommonJS 的模块化方案，所以 ES6 的模块化特性用不了。但是在 Node V13.2.0 之后开始实验性的支持 ESM 模块化，不过需要创建 package.json 文件指明 type 类型为 module。

  • 重写 package.json,设置"type": "module"
{
  "name": "leetcode",
  "version": "1.0.0",
  "description": "",
  "main": "107. 二叉树的层次遍历 II.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
1
2
3
4
5
6
7
8
9
  • 或者直接改写为 require

# Unexpected token 'export'

情景重现

export let test = function() {
  console.log("1");
};
1
2
3
let a = require("./a");
a.test();
1
2
export default {
^^^^^^

SyntaxError: Unexpected token export
1
2
3
4

修改第一个 js

exports.test = function() {
  console.log("1");
};
1
2
3

# only one instance of babel-polyfill is allowed

寻找两次，删除一次

Unhandled Rejection (TypeError): Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.
1

可能代码未更新到页面，刷新一下可能就好了

另一个原因出在 service 地方：responseType: 'blob'

  async downOrigin(params) {
    return request('/wb/api/v1/ins/downOrigin', {
      method: 'POST',
      data: params,
      responseType: 'blob',
    });
  },
1
2
3
4
5
6
7

# Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

# React.Children.only expected to receive a single React element child

某组件只能包含一层包裹的jsx元素，多个的话，则须在外层再包裹一个，以使其成为只有一个顶级包裹的jsx元素

# Warning: React does not recognize the companyId prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase companyid instead. If you accidentally passed it from a parent component, remove it from the DOM element

  const generateItemsOptions = list =>
    list.map(opt => (
      <Option key={opt.id} companyid={opt.companyId} name={opt.name}>
        {opt.name}
      </Option>
    ));
    // 自定义新增的属性名：全小写即可
1
2
3
4
5
6
7

# Cannot read property 'getContext' of null"

canvas还未初始化

# Uncaught NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node

  • dom被清除

# 5 个常见的 JavaScript 内存错误

# 计时器的监听：setInterval()

建议用法

import { useEffect } from 'react';

export const useTimeout = (refreshCycle = 100, callback) => {
    useEffect(() => {
        if (refreshCycle <= 0) {
            setTimeout(callback, 0);
            return;
        }

        const intervalId = setInterval(() => {
            callback();
        }, refreshCycle);

        return () => clearInterval(intervalId);
    }, [refreshCycle, setInterval, clearInterval]);
};

export default useTimeout;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const handleTimeout = () => ...;

useTimeout(100, handleTimeout);
1
2
3

# 事件监听

# Observers

IntersectionObserver接口 (从属于Intersection Observer API) 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根(root)。

# Window Object

# 持有DOM引用

const elements = [];
const list = document.getElementById('list');

function addElement() {
    // clean nodes
    list.innerHTML = '';

    const divElement= document.createElement('div');
    const element = document.createTextNode(`adding element ${elements.length}`);
    divElement.appendChild(element);


    list.appendChild(divElement);
    elements.push(divElement);
}

document.getElementById('addElement').onclick = addElement;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

下一次执行 addElement 时，该元素将从列表 div 中删除，但是它不适合进行垃圾收集，因为它存储在 elements 数组中。