错误警告：无法对未安装的组件执行 React 状态更新答案

【问题标题】：ERROR Warning: Can't perform a React state update on an unmounted component错误警告：无法对未安装的组件执行 React 状态更新
【发布时间】：2022-04-14 10:40:33
【问题描述】：

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

【问题讨论】：

发布导致问题的代码。
请提供足够的代码，以便其他人更好地理解或重现问题。

标签： react-native react-hooks use-effect

【解决方案1】：

1：如何解决无法在 React-hooks 错误中对未安装的组件执行 React 状态更新？ 解决 Can't perform a React state update on an unmounted component in React-hooks Error Here是最简单的解决方案是使用局部变量来跟踪组件是否已安装。

2：无法在 React-hooks 中对未安装的组件执行 React 状态更新 解决 Can't perform a React state update on an unmounted component in React-hooks Error Here是最简单的解决方案是使用局部变量来跟踪组件是否已安装。

解决方案 1： 我构建了这个钩子，它就像 React 的 useState 一样工作，但只有当组件被挂载时才会设置状态。我发现它更优雅，因为您不必在组件中处理 isMounted 变量！

const [count, setCount] = useState(0);

解决方案 2 这是最简单的解决方案是使用一个局部变量来跟踪组件是否已安装。例如。

function Example() {
  const [text, setText] = React.useState("waiting...");

  React.useEffect(() => {
    let isCancelled = false;

    simulateSlowNetworkRequest().then(() => {
      if (!isCancelled) {
        setText("done!");
      }
    });

    return () => {
      isCancelled = true;
    };
  }, []);

  return <h2>{text}</h2>;
}

【讨论】：