在 ReactJs useEffect 中使用 AbortController 和 useStateIfMounted

Question

在我的代码中，我收到了警告

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

这通常发生在我在组件挂载上获取数据时（在 useEffect 中）。 研究了一下，发现是因为组件发生了变化，而之前的组件还在执行组件挂载的过程，并没有进行清理。

我发现使用

useEffect(()=>{
let abortController = new AbortController();  
//function here
return () => {  
abortController.abort();  
    } 
},[]); 

解决了这个问题，因为 abortController.abort() 中止了 DOM 更改的所有内容。 但我不知道它有多安全，或者如果我将它添加到我的代码中是否有任何副作用。

我发现了另一种涉及使用 useStateIfMounted() 而不是 useState() 的方法； 然而，我们正处于项目的后期阶段，我们有点害怕这可能会导致网站以某种方式崩溃。

哪种方法更好，还有另一种方法可以修复此错误吗？

Answer 1

我有一个建议使用SWR REACT HOOK DATA FETCHER

这是因为 AbortController 正在找到他的信号我认为如果你使用 axios -> axios(url,{signal:abortController.signal})你没有把他的信号放在 fetcher 上你会收到那个错误因为你只制作了new abortController而没有把他的向 fecher 发出信号，他不知道他会阻止请求什么数据。

我在客户端获取时遇到了这个问题，我真的推荐 SWR 在客户端获取。

中止控制器 WebApi