Question

我是Reactjs的新手。我收到未捕获的类型错误canvas_resize（）不是函数。下面是代码段，

graphene

我不确定为什么会出现未捕获的类型错误。

Answer 1

必须在生命周期方法之外声明一个函数。另外，使用箭头功能可访问函数内部的此。使用箭头功能时将具有作用域

canvas_resize = () => {
    const canvas_holder = this.canvas_holder_ref.current;
    const new_width = canvas_holder.clientWidth;
    const new_height = canvas_holder.clientHeight;
    const canvas = canvas_holder.children[0];
    canvas.width = new_width;
    canvas.height = new_height;
    canvas.style.width = new_width + 'px';
    canvas.style.height = new_height + 'px';
};

componentDidMount() {
    window.addEventListener('resize', () => {
        this.canvas_resize();
        this.start_drawing();
    });
}

OR

componentDidMount() {
    const that = this;
    window.addEventListener('resize', function(){
        that.canvas_resize();
        that.start_drawing();
    });
}

但是我建议您使用箭头函数，而不要将此函数引用为函数内部的局部变量

Answer 2

这是工作示例-https://codesandbox.io/s/j43r4o457v

Answer 3

canvas_resize方法应在componentDidMount生命周期方法之外声明。

componentDidMount() {
  window.addEventListener('resize', () => {
      this.canvas_resize();
      this.start_drawing();
  });
}

canvas_resize = () => {
    const canvas_holder = this.canvas_holder_ref.current;
    const new_width = canvas_holder.clientWidth;
    const new_height = canvas_holder.clientHeight;
    const canvas = canvas_holder.children[0];
    canvas.width = new_width;
    canvas.height = new_height;
    canvas.style.width = new_width + 'px';
    canvas.style.height = new_height + 'px';
};

未捕获的类型错误不是函数reactjs

3 个答案: