【H5】模式下Taro.createCanvasContext(this.canvasId, this) 报错

[Rahim-Chan]

在H5下使用Taro.createCanvasContext(this.canvasId, this)时报错了。

Cannot read property 'vnode' of undefined

报错文件地址
webpack:///node_modules/@tarojs/taro-h5/src/api/canvas/createCanvasContext.js

系统信息
👽 Taro v1.3.4

Taro CLI 1.3.4 environment info:
System:
OS: Windows 10
Binaries:
Node: 10.15.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.9.2 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[luckyadam]

贴一下使用的代码吧

[taro-bot]

CC @Littly

[Rahim-Chan]

贴一下使用的代码吧

import Taro, { Component } from '@tarojs/taro';
import PropTypes from 'prop-types';
import { Canvas } from '@tarojs/components';
import './index.css';
function randomString(length) {
    var str = Math.random().toString(36).substr(2);
    if (str.length >= length) {
      return str.substr(0, length);
    }
    str += randomString(length - str.length);
    return str;
  }
export default class CanvasDrawer extends Component {
  constructor(props) {
    super(props);
    this.canvasId = randomString(10);
    this.ctx = null;
  }


  componentDidMount() {
    this.create();
  }

  create = (config) => {
    this.ctx = Taro.createCanvasContext(this.canvasId, this.$scope);
    const height = getHeight(config);

  }


  render() {
    const { pxWidth, pxHeight, debug } = this.state;
    if (pxWidth && pxHeight) {
      return (
        <Canvas
          canvas-id={this.canvasId}
          style={`width:${pxWidth}px; height:${pxHeight}px;`}
          className={`${debug ? 'debug' : 'pro'} canvas`}
        />
      );
    }
    return null;
  }
}

[Littly]

  create = (config) => {
    this.ctx = Taro.createCanvasContext(this.canvasId, this.$scope);
    const height = getHeight(config);

  }

this.$scope的意思是让你把组件的scope传进去，也就是说一般放this就好了，而不是让你把整个this.$scope放进去

[Rahim-Chan]

  create = (config) => {
    this.ctx = Taro.createCanvasContext(this.canvasId, this.$scope);
    const height = getHeight(config);

  }

this.$scope的意思是让你把组件的scope传进去，也就是说一般放this就好了，而不是让你把整个this.$scope放进去

这个我也放this也放了。

[archerQ]

请问下这个有解决吗，用Canvas总是会出现各种各样的问题，刚解决一个又出现跟你一样的问题

[amzfcy]

@Rahim-Chan 您好，请问这个问题解决了吗？

[buuing]

@Rahim-Chan 现在是崭新的2021年2月3号目前为止依然还在报错, 我弱弱的问一下, 这个问题taro还有计划修复吗🤣

[zqqqqz]

目前H5调用createCanvasContext方法还是会报错，taro版本3.4.3