Javascript 无法使用fetch POST方法对未安装的组件执行React状态更新

当我使用fetch post方法时，我收到了这个警告。我如何取消useEffect清理函数中的所有订阅和异步任务。使用我的post方法

警告：无法对已卸载的组件执行React状态更新。这是一个no-op，但它表示应用程序中存在内存泄漏。要修复此问题，请取消useEffect清理函数中的所有订阅和异步任务

您可以使用React.useRef：

在您的组件中：

const hasUnmounted = React.useRef(false);

React.useEffect(() => {

 // maybe you have your side effects here, so you can use the boolean to avoid 
 // state updates when the component is unmounted

 if(!hasUnmounted.current) {
  // do state update 
 }
 return () => {
  hasUnmounted.current = true;
 }
}, [])

---

React.useRef适合解决这个问题，因为它与更改组件的状态非常不同，这有点像类组件中的实例变量，更改它不会触发重新渲染器。

我同意Ramesh使用ref。我想我应该展示如何将其提取到自定义挂钩中

函数useHasUnmountedRef{ const hasnumountref=useReffalse； useEffect=>{ 返回=>{ hasUnmountedRef.current=true； } }, []; 返回hasnumendref； } 函数形式{ const hasUnmountedRef=使用hasUnmountedRef； const handleSubmit=async=>{ 等待新的东西； 如果已卸载F.current{ //提早退出，因为组件已卸载 回来 } //多亏了上面的保护条款，你可以在这里担保 //指出您的组件仍在安装。您可以执行 //状态更新而不生成React警告。 // //如果您再次等待，则需要检查 //再一次。每次你等待异步的东西，都有机会 //组件可能在等待 //异步的东西来完成。 }; 回来 ; } 导出默认表单；

---

这是一个警告。。。我看不出有错误，但如何修复你只显示了调用api的函数，而没有显示如何调用，或者当你调用它们时如果你向下滚动代码它的in Handle Submit函数和in state update put my这两个函数？@KubaKluzniak你的意思是调用发送/获取一些数据并更新状态的函数？是的，这对我来说不起作用，当我把这个函数放进去时，它会在输入数据后执行，这取决于你如何使用布尔值，你可以，例如，在组件中使用useEffect，但在useEffect之外但在组件内部的另一个函数中使用布尔值。此useEffect将在每个渲染中触发，因为它没有依赖项数组。我想你不想那样。我想你忘了包含空的依赖数组。你的自定义钩子没有返回任何内容。我会编辑它。也许这是一个愚蠢的问题，但如果haunmountedref{return；}@KubaKluzniak这只是一个守卫子句，我需要加什么呢。它会阻止您执行函数的其余部分。它应该有返回，没有其他。做了一些额外的修复，在正确的位置使用ref或ref值

const hasUnmounted = React.useRef(false);

React.useEffect(() => {

 // maybe you have your side effects here, so you can use the boolean to avoid 
 // state updates when the component is unmounted

 if(!hasUnmounted.current) {
  // do state update 
 }
 return () => {
  hasUnmounted.current = true;
 }
}, [])