在使用了react-hooks加上echarts-taro3-react之后报错addEventListener is not a function

[crastyle]

相关平台

微信小程序

小程序基础库: 2.17.0
使用框架: React

复现步骤

使用的是react-hook。
按照代码步骤引入的echarts-taro3-react。
demo中使用的是ref，我把他换成了useRef
`
import { Component, useRef, useLayoutEffect } from 'react'
import { View, Button, Text } from '@tarojs/components'
import { observer, inject } from 'mobx-react'
import { EChart } from "echarts-taro3-react";

import './index.scss'

const App = () => {
const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}]
};

let barChart: any = null
useLayoutEffect(() => {
console.log(barChart)
barChart.refresh(option)
})
const refBarChart = (node) => (barChart = node);
return (

123


)
}

export default inject('store')(observer(App))
`

期望结果

正常使用，并渲染出结果

实际结果

TypeError: r.addEventListener is not a function

环境信息

👽 Taro v3.3.1


  Taro CLI 3.3.1 environment info:
    System:
      OS: macOS 11.4
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 16.4.2 - /usr/local/bin/node
      Yarn: 1.22.10 - ~/.npm-global/bin/yarn
      npm: 7.19.1 - ~/.npm-global/bin/npm
    npmPackages:
      @tarojs/components: 3.3.1 => 3.3.1 
      @tarojs/mini-runner: 3.3.1 => 3.3.1 
      @tarojs/react: 3.3.1 => 3.3.1 
      @tarojs/runtime: 3.3.1 => 3.3.1 
      @tarojs/taro: 3.3.1 => 3.3.1 
      @tarojs/webpack-runner: 3.3.1 => 3.3.1 
      babel-preset-taro: 3.3.1 => 3.3.1 
      eslint-config-taro: 3.3.1 => 3.3.1 
      react: ^17.0.0 => 17.0.2 
    npmGlobalPackages:
      typescript: 4.3.5

[crastyle]

已解决，和taro无关。
在echarts源码里，搜索function(t)，第三个，在后面加上两个参数变为,function(t, window, document)

[hellozsh]

@crastyle 关于这个问题，方便贴一下完整代码么？

[crastyle]

@crastyle 关于这个问题，方便贴一下完整代码么？

您好，我目前没有代码了，不过如果遇到和我一样的情况，你可以按照我上面说的那样去解决的

在echarts源码里，搜索function(t)，第三个，在后面加上两个参数变为,function(t, window, document)

[hellozsh]

@crastyle 关于这个问题，方便贴一下完整代码么？

您好，我目前没有代码了，不过如果遇到和我一样的情况，你可以按照我上面说的那样去解决的

在echarts源码里，搜索function(t)，第三个，在后面加上两个参数变为,function(t, window, document)

可以了，我调试除了这么加，我还注释掉 el.addEventListener(name, handler, opt); 和 el.attachEvent('on' + name, handler); 还有
// e.preventDefault();
// e.stopPropagation();
// e.cancelBubble = true;
就可以了

[Yonghero]

我修改了 还是这个报错

[hellozsh]

你看看报错信息，有说哪个文件下的哪个方法，你去找到来，确定注释对了
我这taro3.3.1和3.3.2都可以，
下载echarts-taro3-react，把这个包放到自己的src/components下，echart.js要替换成最新的，去官网下载最新的
之后再根据报错提示注释这几个方法，使用的话直接用src/components/echarts-taro3-react，不用库上的

[lefo0755]

echarts.apache.org下载最新echarts.min.js，检索“e(t.echarts={})”字符串找到相邻的(this,function(t) 串 ，将其改为(this,function(t,window,document)保存即可

[rayallen001]

echarts.apache.org下载最新echarts.min.js，检索“e(t.echarts={})”字符串找到相邻的(this,function(t) 串 ，将其改为(this,function(t,window,document)保存即可

按这种方式，解决了我升级到 Taro 3.3.9 之后，echarts 图表不展示的问题

[zhoulujun]

无论你是使用 echarts-taro3-react 还是使用 techarts，结果都是一样的。控制台报错：el.addEventListener is not a function
taro 版本，回退到 taro 3.0.7 ，不会报错的。
使用最新版本，就只有 按照楼上的办法
#9914 (comment)
echarts.apache.org下载最新echarts.min.js，检索“e(t.echarts={})”字符串找到相邻的(this,function(t) 串 ，将其改为(this,function(t,window,document)保存即可

按这种方式，解决了我升级到 Taro 3.3.9 之后，echarts 图表不展示的问题

[WaWaPeppa]

你看看报错信息，有说哪个文件下的哪个方法，你去找到来，确定注释对了 我这taro3.3.1和3.3.2都可以， 下载echarts-taro3-react，把这个包放到自己的src/components下，echart.js要替换成最新的，去官网下载最新的 之后再根据报错提示注释这几个方法，使用的话直接用src/components/echarts-taro3-react，不用库上的

您好，方便贴一下代码吗 我还是没解决这个问题,修改后无报错 但是页面也没有画图

[crastyle]

您好，以下是自动回复内容：　　您的来信我已收到，我会在尽快最短时间内回复您！　　谢谢您的来信,祝您生活愉快

[crastyle]

您好，以下是自动回复内容：　　您的来信我已收到，我会在尽快最短时间内回复您！　　谢谢您的来信,祝您生活愉快

[ystyle]

echarts.apache.org下载最新echarts.min.js，检索“e(t.echarts={})”字符串找到相邻的(this,function(t) 串 ，将其改为(this,function(t,window,document)保存即可

taro 3.4.1 可以

方法:

在/node_modules/echarts-taro3-react/lib/ec-canvas/echarts.js中
检索e(t.echarts={})字符串找到相邻的(this,function(t) 串 ，将其改为(this,function(t,window,document)保存即可

[crastyle]

您好，以下是自动回复内容：　　您的来信我已收到，我会在尽快最短时间内回复您！　　谢谢您的来信,祝您生活愉快

[helloint]

有谁知道这个报错到底是为什么？谢谢🙏

[crastyle]

您好，以下是自动回复内容：　　您的来信我已收到，我会在尽快最短时间内回复您！　　谢谢您的来信,祝您生活愉快