因为项目中使用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
}
}