最近接手的網站遇到了這個錯誤。
其實這是一個蠻容易解決,卻被忽略的 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() { // 略 } }