【报错】Can’t perform a React state update on an unmounted component. This is a no-op, but it indica

报错

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
}