小编Byr*_*son的帖子

我见过一些类似的问题，但没有一个措辞完全像这样：

我有一个通过声明式 React 组件模型公开的命令式 API，并且在大多数情况下它运行得很好，但我遇到了一些我不知道如何解决的警告，所以我一直忽略。

我有一个自定义挂钩，大致如下所示：

function useViewer(someDependency) {
  const [ready, setReady] = useState(true);
  useEffect(() => {
    if (!ready) return;
    const viewer = makeViewer(someDependency);
    return () => {
      setReady(false);
      viewer.cleanup().then(() => setReady(true));
    }
  }, [someDependency, ready]);
}

该标志的要点ready是查看器的清理需要在创建后续查看器之前进行。

然而，当我这样做时，我收到以下警告：

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

我可以在组件卸载时不发生状态更新，如下所示：

function useViewer(someDependency) {
  const [ready, setReady] = useState(true);
  const hasUnmountedRef = useHasUnmounted();
  useEffect(() => {
    if (!ready) return;
    const viewer = makeViewer(someDependency);
    return () => {
      setReady(false);
      viewer.cleanup().then(() => {
        const hasUnmounted = …