Question

卸载组件后，在调整窗口大小时出现错误。我知道window.removeEventListener正在被调用，但它的行为似乎永远不会被调用。错误说：

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

我甚至尝试过使用React文档中的代码示例，它的功能与我的课程相同。来自https://facebook.github.io/react/tips/dom-event-listeners.html：

import React from "react";

var HeaderMain = React.createClass({
  getInitialState: function() {
    return {windowWidth: window.innerWidth};
  },

  handleResize: function(e) {
    this.setState({windowWidth: window.innerWidth});
  },

  componentDidMount: function() {
    window.addEventListener('resize', this.handleResize);
  },

  componentWillUnmount: function() {
    window.removeEventListener('resize', this.handleResize);
  },

  render: function() {
    return <div>Current window width: {this.state.windowWidth}</div>;
  }
});

module.exports = HeaderMain;

我已经尝试过使用bind()，我已经在ES6中尝试了它，并尝试了不同版本的React.js。我无法摆脱错误。

如何确保我的事件监听器将被删除？

Answer 1

我发现它与绑定有关。当你调用.bind（this）时，它返回一个具有所需范围的新函数，因此它没有注册我认为我添加的相同函数。

另外，无论出于何种原因，我发现在ES6 + React v15.3.1（最新版本）中，自动绑定并没有像ES5（相同版本的React）那样发生（我认为应该如此），所以我只是存储了对绑定函数的引用，并重用它。

import React from "react";

export default class HeaderMain extends React.Component {

  boundFunc = this.handleResize.bind(this);

  constructor()
  {
    super();

    this.state = {height:window.innerHeight + "px"};
  }

  handleResize(e)
  {
    this.setState({height:window.innerHeight + "px"});
  }

  componentDidMount()
  {
     window.addEventListener('resize', this.boundFunc);
  }

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

  render() {

    return (
      <header class="header_main" style={{height:this.state.height}}>
         Example Header
      </header>
    );
  }
}

Answer 2

不要担心此警告，您可以使用console.log()函数中的handleresize进行测试，如下所示：

 handleResize: function(e) {
    this.setState({windowWidth: window.innerWidth} , function(){
    console.log("windowWidth" , windowWidth);
    });
  }

使用更改路线或任何操作来测试componentWillUnmount功能，然后打开console并调整窗口大小。

在React.js中，使用componentWillUnmount删除事件侦听器，如何确保删除事件侦听器？

2 个答案: