useEffect 清理/内存泄漏答案

【问题标题】：useEffect cleanup / memory leakuseEffect 清理/内存泄漏
【发布时间】：2021-07-13 10:27:54
【问题描述】：

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

这是我在每一页上放的内容：

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

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

“加载数据”可能需要 3-4 秒才能加载数据。它工作正常。

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

Warning: 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. in Data (created by Context.Consumer)

如果我检测到页面更改，我想我必须取消我的加载特性。但是我该怎么做呢？

非常感谢

【问题讨论】：

因为在 myPageLoad 函数内部你正在更新组件的状态。
这能回答你的问题吗？ Can't perform a React state update on an unmounted component

标签： reactjs react-native use-effect usecallback

【解决方案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

【讨论】：