已设置useEffect清理函数仍出现no-op错误，求解决方案

我写了一个函数，当条件满足时会把状态设为true并展示对应UI。功能看似能用，但马上抛出no-op错误，状态瞬间闪回false。我用了useEffect在首次渲染时检查条件来展示UI，尝试用清理函数但不太熟，求建议或指引。

错误提示 #

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.

相关代码 #

const [isPatched, setIsPatched] = useState<boolean>(false);

useEffect(() => {
  getApplied(x);
  return () => {
    setIsPatched(false);
  };
}, []);

const getApplied = (x: any) => {
  console.log(x);
  if (x.Log) {
    setIsPatched(true);
    return;
  } else {
    setIsPatched(false);
  }
};

核心问题 #

1. 你在useEffect的清理函数里直接调用setIsPatched(false)，这会导致组件卸载时强制把状态设为false——如果组件在getApplied执行完成前就卸载了，setIsPatched(true)会触发对已卸载组件的状态更新，直接抛出警告，同时状态闪回也是这个清理函数导致的。
2. 这个清理函数完全没必要，它不仅没解决内存泄漏问题，反而制造了新的bug。

正确处理方式 #

• 加个挂载状态标记：在useEffect里定义一个变量跟踪组件是否还挂载着，这样就能避免对已卸载组件执行状态更新：

const [isPatched, setIsPatched] = useState<boolean>(false);

useEffect(() => {
  let isMounted = true; // 标记组件当前是否处于挂载状态

  const getApplied = (x: any) => {
    console.log(x);
    if (isMounted) { // 只有组件还挂载着，才更新状态
      setIsPatched(!!x.Log);
    }
  };

  getApplied(x);

  return () => {
    isMounted = false; // 组件卸载时把标记设为false，阻止后续无效的状态更新
  };
}, [x]); // 注意：如果x是组件外部传来的变量，一定要加到依赖数组里

• 删掉多余的状态重置：原清理函数里的setIsPatched(false)是状态闪回的直接原因，直接删掉就行，用上面的挂载标记来防止无效更新。
• 检查依赖数组：如果x是外部变量，必须把它放进useEffect的依赖数组，否则x更新后不会重新触发检查逻辑。

补充说明 #

组件卸载后还执行状态更新是React里常见的内存泄漏场景，哪怕现在getApplied是同步的，以后改成异步API调用的话问题会更明显。用挂载标记是最直接的解决方式，不用额外装库，逻辑也清晰。

内容的提问来源于stack exchange，提问作者deadant88