使用echarts-for-react报错：Cannot read properties of undefined (reading 'disconnect')

结论：ECharts版本太高可能导致这个报错

1
2
3
4
5
6


import ReactEcharts from 'echarts-for-react'

<ReactEcharts
  option={}
  style={{ height: '350px', width: '100%' }}
/>

依赖

1
2
3
4


"dependencies": {
  ...
  "size-sensor": "^1.0.0"  // DOM 元素尺寸监听器，当元素尺寸变化的时候，将会触发回调函数！
},

查看函数调用栈

调试代码

resizeObserver.js
在使用ResizeObserver 对象的dsconnect方法时提示的错误

可以看见在执行这里时sensor等于undefined，意思是执行到destroy的时候还没有执行bind，所以导致的错误，继续往上层找

sensorPool里面调用的destroy，但是没有看到bind，继续往上层找

在上一层的index文件里面找到导出bind的地方，看是哪里引用的，继续往外层找

在core.js文件里面看见导入的index

分析

可以知道在EchartsReact组件卸载的时候会调用dispose，这时会判断有没有echartsElement，有的话就调用clear方法
这个echartsElement是从哪里来的呢？

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


_this.dispose = function () {
  if (_this.echartsElement) {
    try {
      (0, _sizeSensor.clear)(_this.echartsElement);
    } catch (e) {
      console.warn(e);
    }
    // dispose echarts instance
    _this.echartsLib.dispose(_this.echartsElement);
  }
};

在组件render的时候产生的

这里去查看源码知道了echartsLib是echarts导出

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


// src/index.js
import echarts from 'echarts';
import EchartsReactCore from './core';

// export the Component the echarts Object.
export default class EchartsReact extends EchartsReactCore {
  constructor(props) {
    super(props);
    this.echartsLib = echarts;
  }
}