Question

我有一个组件，即使在组件卸载时也会继续尝试调整画布元素的大小（在窗口大小调整上）。因此，只有在组件卸载并调整屏幕大小后才会发生错误。以前，我已经使用setInterval绘制画布，因为画布显示了动态数据。从那里，我可以使用clearInterval来停止绘制画布。在这种情况下，我不需要setInterval，因为此画布上的数据上传速度非常慢。这是错误发生的地方......

componentDidMount() {
   this.circleOne(); //These functions draw the circle
   this.circleTwo();
   window.addEventListener("resize", () => {
     this.circleOne(); //TypeError: Cannot read property 'getContext' of null
     this.circleTwo();
   }
 );
}

Answer 1

您应该在React's componentWillUnmount方法中删除“调整大小”侦听器。

为此，您需要引用侦听器（即它不能是匿名函数）。

例如，您可以使侦听器成为另一个类方法，如下所示：

class MyComponent extends React.Component {
    constructor(props) {
        super(props)

        this.onResize = this.onResize.bind(this)
    }

    onResize() {
        this.circleOne()
        this.circleTwo()
    }

    componentDidMount() {
        this.onResize() // Call to trigger the first draws
        window.addEventListener('resize', this.onResize)
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.onResize)
    }

    // Other methods...
}

如何在卸载组件时删除canvas元素？

1 个答案: