react 移除监听事件无效

因为项目中使用iframe嵌入页面，所以需要监听message事件，但是发现无法removeEventListener，写法如下：

    componentDidMount() {

        window.addEventListener("message", this.receiveMessage.bind(this))

    }

    componentDidUpdate() {

        this.receiveMessage()

    }

    componentWillUnmount() {

        window.removeEventListener("message", this.receiveMessage.bind(this));

        this.setState = () => {

            return

        }
    }

    receiveMessage = (event) => {

        if (event !== undefined) {

            console.log('弹窗,我接受到了来自iframe的数据：', event.data);

            this.setState({ iframeData: event.data })
        }
    };

原因就在于添加了bind(this)

更正之后:

    componentDidMount() {

        window.addEventListener("message", this.receiveMessage)

    }


    componentDidUpdate() {

        this.receiveMessage()

    }

    componentWillUnmount() {

        window.removeEventListener("message", this.receiveMessage);

        this.setState = () => {

            return

        }

    }



    receiveMessage = (event) => {

        if (event !== undefined) {

            console.log('弹窗,我接受到了来自iframe的数据：', event.data);

            this.setState({ iframeData: event.data })

        }

    };

 

 

另外遇到的问题:

 

 大致意思：不能对于一个已经卸载的组件上使用setState改变状态，这将会造成应用的内存泄漏。

 

解决方案：

  componentWillUnmount() {
    this.setState = () => {
      return
    }
  }