因為項目中使用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
}
}