最近接手的網站遇到了這個錯誤。
其實這是一個蠻容易解決，卻被忽略的 bug。 起因在於 React Component 在被銷毀後，去使用了 setState 的動作。導致無法找到綁定的 component。
通常是發生在非同步處理事件尚未結束，component 就被銷毀，然後結束時的 cabalback 做了 setState 。
簡單的方法是做一個 isMounted 的 flag，然後在 componentWillUnmount 中判斷。
React Hook 的寫法比較簡單，在 useEffect 裡面完成就可以
useEffect(() => {
let isMounted = true;
// async function
async function doSomething() {
// 檢查是否 mounted
if (isMounted) {
// 在這裡執行 setState
}
}
doSomething();
// 在组件被銷毀前，設置 isMounted 為 false
return () => { isMounted = false; }
}, [])
以下是 React class 的寫法：
class MyComponent extends React.Component {
state = {
// 定义初始狀態
};
isMounted = false;
componentDidMount() {
this.isMounted = true;
// async 函數
async function doSomething() {
if (this.isMounted) {
// 執行setState
}
}
doSomething();
}
componentWillUnmount() {
this.isMounted = false;
}
render() {
// 略
}
}
