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

2024-07-15 526 views
1
相关平台

微信小程序

小程序基础库: 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

回答

9

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

7

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

3

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

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

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

1

我修改了 还是这个报错

7

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

1

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

6

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

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

4

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

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

1

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

7

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

0

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

6

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)保存即可

3

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

5

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

8

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