報錯

Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

分析

這是由于請求接口數據加載比較慢，setState還未完成，用戶切換了組件或者切換頁面時候，此時組件已被卸載，仍然嘗試修改組件的狀態所導致的問題。在組件被卸載后，setState動作還在持續,但此時無法使用setState來改變組件的狀態，這會導致React引擎出現內存泄漏警告。

解決

為了解決這個問題，應該在組件卸載時，清除所有的異步任務和訂閱，可以使用useEffect的清理函數來完成這個任務。在清理函數中取消所有正在進行的異步任務。

函數式組件寫法

useEffect(() => {
  const fetchData = async () => {
    const result = await axios.get('api/data')
    setData(result.data)
  }
  fetchData()
  return () => {
    // 在組件卸載后取消異步任務
    if (source) {
      source.cancel('Component unmounted')
    }
  }
}, [])

類組件寫法

componentWillUnmount() {
   this.setState = () => false
}