Question

我正在React制作一个网络应用程序。我目前有页面A和页面B.页面A有一些事件监听器绑定到页面上的各种元素。但是，当我从页面A导航到页面B时，我在控制台中反复出现以下错误（例如几秒钟内的几十个错误）：

警告：setState（...）：只能更新已安装或安装的组件。这通常意味着您在已卸载的组件上调用了setState（）。这是一个无操作。请检查LandingPageHeader组件的代码。

我是否需要在componentWillUnmount（）函数（第A页）中取消绑定这些侦听器？或者还有其他事情发生了吗？此外，这些事件监听器中的一些绑定到html标签是否重要？

还应注意，上述事件侦听器的某些事件处理程序确实执行涉及更新/设置React状态的函数。

Answer 1

是的，你可以在componentWillUnmount取消绑定事件监听器，或者在页面A组件中设置一个标志，每次在setState之前检查这个标志。

componentDidMount() {
    var _this = this;
    this._mounted = true;

    // in listenner function 
    window.addEventListener('resize', funciton () {
        if (_this._mounted) {
            _this.setState({});
        }
    });
}

componentWillUnmount() {
    this._mounted = false;
}

在离开React页面时，是否需要取消绑定/删除事件侦听器？

1 个答案: