时间戳

首页 > 解决方案 > react中的useEffect清理功能

reactjs - react中的useEffect清理功能

问题描述

我收到此警告“无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，请取消 useEffect 清理函数中的所有订阅和异步任务。

代码

 const [photo, setPhoto] = useState([]);
 useEffect(() => {
 fetch('/mypost', {
  headers: {
    cookie: 'access_token',
  },
})
  .then((res) => res.json())
  .then((data) => {
    setPhoto(data.mypost);
  });
}, []);

数据已获取，但我不知道要在清理中添加什么。有什么建议么？

标签： reactjsreact-hooks

解决方案

问题

问题是获取请求已解决，但组件已卸载（出于某种原因），因此现在无法进行状态更新。

解决方案

您需要使用Abort Controller来取消正在进行的请求。如果组件卸载，效果清理函数会取消获取请求。

useEffect(() => {
  const controller = new AbortController(); // <-- create controller
  const { signal } = controller; // <-- get signal for request

  fetch('/mypost', {
    headers: {
      cookie: 'access_token',
    },
    signal, // <-- pass signal with options
  })
    .then((res) => res.json())
    .then((data) => {
      setPhoto(data.mypost);
    });

  return () => controller.abort(); // <-- return cleanup function to abort
}, []);

注意：当abort()被调用时，fetch()promise 会以 AbortError.

您可能需要在某个地方捕捉到这个承诺拒绝。您可以将一个块附加.catch到 Promise 链。

  fetch('/mypost', {
    headers: {
      cookie: 'access_token',
    },
    signal, // <-- pass signal with options
  })
    .then((res) => res.json())
    .then((data) => {
      setPhoto(data.mypost);
    })
    // catch any rejected fetch promises (including aborted fetches!)
    .catch(console.error);

推荐阅读