欣迪

最近接手的網站遇到了這個錯誤。

其實這是一個蠻容易解決,卻被忽略的 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() {
    // 略
  }
}

訂閱 IT-Monk

訂閱最新文章的發布消息! 😚😚😚
Loading

作者介紹 - 欣迪

欣迪

從設計到寫程式,發現自己有追求前端技巧的自虐傾向。不斷的踩坑,再從坑裡爬出來,慢慢對攀岩有點心得。 目前在多間公司擔任網站設計顧問。 同時也是網站架設公司負責人。