報錯

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.

分析

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

解決

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

函數(shù)式組件寫法

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

類組件寫法

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