useEffect清理/内存泄漏

Question

我编写了一个ReactJS网络应用程序。这是一个单一页面应用程序(SPA)。我有一个有几页的菜单。每个页面都是一个.js文件。由于SPA，当我更改菜单中的页面时，我的浏览器不会刷新整个页面。

以下是我在每一页上的内容：

const myPageLoad = useCallback(async () => {
   // loading data
}, []);

useEffect(() => {
  myPageLoad();
}, [myPageLoad]); 

“加载数据”可以花3-4秒来加载数据。效果很好。

如果我决定在“加载数据”完成之前从菜单中更改页面，我将在javascript控制台中得到以下警告：

警告:无法对未挂载的组件执行反应状态更新。这是一个非操作，但它表示您的应用程序中存在内存泄漏。若要修复，请取消useEffect清理函数中的所有订阅和异步任务。在数据中(由Context.Consumer创建)

如果我检测到页面更改，我想我必须取消我的加载日志。但我怎么能做到呢？

非常感谢

Answer 1

您可以使用abort，我以这样的方式修复了这种错误：

useEffect(() => {
  // get abortion variables
  let abortController = new AbortController();
  let aborted = abortController.signal.aborted; // true || false
  async function fetchResults() {
    let response = await fetch(`[WEBSITE LINK]`);
    let data = await response.json();
    aborted = abortController.signal.aborted; // before 'if' statement check again if aborted
    if (aborted === false) {
      // Make sure all your 'set states' inside this kind of 'if' statement
      setState(data);
    }
  }
  fetchResults();
  // make sure to return this abort()
  return () => {
    abortController.abort();
  };
}, [])

其他方法：https://medium.com/wesionary-team/how-to-fix-memory-leak-issue-in-react-js-using-hook-a5ecbf9becf8