开发中遇到的报错

1、使用 Element-ui 的导航，重复点击一个导航，遇到一个错误，报错信息如下：

Uncaught (in promise) Error: Avoided redundant navigation to current location: "/xxx/xxx/xxx"

（看网上说的是：vue-router 3.0 以上会出现这个报错）

解决方法如下：

在项目路由配置文件里面加上如下代码：

Router.prototype.push = function push(location) {
  return Router.prototype.push.call(this, location).catch(err => err)
}

2、无法读取未定义的属性“ XXX ”

报错信息如下：

Cannot read property 'XXX' of undefined

报错产生原因：

前端接受后端返回的数据，数据对象层级嵌套较深。

举例：

前端所需数据为： aaa.bbb.ccc
后端返回数据为： {}
此时前端如果直接使用 aaa.bbb.ccc 则会报错。

解决方法

// 在使用数据之前判断外层数据是否有值，当外层数据是 null 或者 空 时，直接返回，不再获取内层数据。
// 例：
if (!Bollean(aaa.bbb)) {
	return
}

3、无法读取未定义的属性“ forEach”

报错信息如下：

Cannot read property 'forEach' of undefined

错误产生原因

forEach 是数组方法
如果调用 forEach 方法的不是数组，则会报错。

解决方法：

调用 forEach 方法之前确保该数据的数据类型是数组类型。

4、无法将属性“ opportunityId”的类型“ java.lang.String”的属性值转换为所需的类型“ java.lang.Integer”

报错信息如下：

Failed to convert property value of type 'java.lang.String' to required type 'java.lang.Integer' for property 'opportunityId';

错误产生原因

前端数据类型输入错误。
后端接受数据时，要获取 number 类型的数据，前端数据框中没有做数据校验，导致输入的数据是字符串，后端无法使用。

解决办法

// 前端输入框做数据校验，确保传入后端的数据是后端期望的数据类型
例:
后端所需数据类型是 number
<el-input
      :step="step"
      type="number"
      clearable
      v-model="currentVal"
      onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))"
      @mousewheel.native.prevent
      v-on="$listeners"
      v-bind="$attrs"></el-input>
      
其中： onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))"
确保了从键盘输入的数据一定是 number
ps： element-ui 中 type = number 的输入框，可以输入字母 'e'

5、TypeError：无法获取未定义或空引用的属性“ encryptOpportunityPhone”

报错信息如下：

TypeError: Unable to get property 'encryptOpportunityPhone' of undefined or null reference

错误产生原因：

使用数据之前，层级嵌套较深，没有判断数据是否存在就使用使用该数据。
// 例子及解决方法，参考本文第三点。

6、无法读取null的属性“ length”

报错信息如下：

TypeError: Cannot read property 'length' of null

错误产生原因：

调用了没有的属性：length
解决方法类比本文第二点。

7、超过ResizeObserver循环限制

报错信息如下：

msg: "ResizeObserver loop limit exceeded"
// 此错误可以忽略，不会影响程序运行。

错误产生原因：

// element-ui 自2.3.5版本后，Table-column取消了默认宽度大小，增加了type参数，type的可选值有selection/index/expand，
// 每个type对应了一些默认的宽度设置，设置了type不报ResizeObserver loop limit
// exceeded错误了，但是column的宽度不再自适应均分table的宽度

解决办法：

目前已知以下解决方法：
  设置表格宽度以及内容最大宽度