Javascript ReactJS:仍在调用Null对象

我使用这个库来控制我的滚动动画。问题是，当我路由到另一个页面时，来自已处理对象的回调仍在被调用

constructor(props) {
    this.flags = [];
}

componentWillUnmount() {
    this.scroll = null;
    for (var i = 0; i < this.flags.length; i++) {
        this.flags[i].callback = null; <-- Dispose the callback
        this.flags[i] = null; <-- Dispose the flag object
    }

    this.flags = null; <-- Dispose every flags
}

以下是我创建对象的方式：

createAnimationControl() {
    var that = this;
    let scrollHeight = document.getElementById('what-we-do-3D-scroll').scrollHeight - window.innerHeight;
    let body = document.getElementById('body');

    this.flags.push(that.scroll.addFlag(body, {
        start: 0,
        duration: scrollHeight,
        callback: function (value, target) {
                let z = 0.7 * value;
                that.camera.setTarget(new window.BABYLON.Vector3(that.camera._target._x, that.camera._target._y, z));

                let v = (that.resizedZoom - 0.66) * value;
                that.camera.radius = that.resizedZoom - v;
        }
    }));

    this.flags.push(that.scroll.addFlag(body, {
        start: scrollHeight / 2,
        duration: 2 * scrollHeight / 3,
        callback: function (value, target) {
                document.getElementById('what-we-do-3D-overlay').style.opacity = value;
        }
    }));

    this.flags.push(that.scroll.addFlag(body, {
        start: scrollHeight - 30,
        duration: scrollHeight,
        callback: function (value, target) {
                document.getElementById('what-we-do-1st').style.opacity = value;
        }
    }));
}

---

当路由到其他页面时，如何完全处理它？

查看源代码，最简单的解决方案似乎是告诉

滚动对象它“死了”：

这将调用此库正在使用的
requestAnimationFrame
“循环”

createAnimationControl() {
    var that = this;
    let scrollHeight = document.getElementById('what-we-do-3D-scroll').scrollHeight - window.innerHeight;
    let body = document.getElementById('body');

    this.flags.push(that.scroll.addFlag(body, {
        start: 0,
        duration: scrollHeight,
        callback: function (value, target) {
                let z = 0.7 * value;
                that.camera.setTarget(new window.BABYLON.Vector3(that.camera._target._x, that.camera._target._y, z));

                let v = (that.resizedZoom - 0.66) * value;
                that.camera.radius = that.resizedZoom - v;
        }
    }));

    this.flags.push(that.scroll.addFlag(body, {
        start: scrollHeight / 2,
        duration: 2 * scrollHeight / 3,
        callback: function (value, target) {
                document.getElementById('what-we-do-3D-overlay').style.opacity = value;
        }
    }));

    this.flags.push(that.scroll.addFlag(body, {
        start: scrollHeight - 30,
        duration: scrollHeight,
        callback: function (value, target) {
                document.getElementById('what-we-do-1st').style.opacity = value;
        }
    }));
}

componentWillUnmount() {
  this.scroll.dead = true;
}