如何修复、取消 useEffect 清理功能错误中的所有订阅和异步任务

Question

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

useEffect(() => {
    const unsubscribe = streamCourses({
      next: (querySnapshot) => {
        const task = querySnapshot.docs.map((docSnapshot) => 
            mapDocTask(docSnapshot)
          );
        setCourseDetails(task);
      },
      error: (error) => console.log(error),
    });
    return unsubscribe;
  }, [setCourseDetails]);

Answer 1

我遇到了类似的问题。我必须做两件事来解决它：

(1) 我创建了一个State boolean isMounted，它默认设置为true，用于包装我的useEffects 的内容，这样我的useEffects 的内容只会如果屏幕是mounted，则运行。

(2) 我创建了一个专门用于清理的useEffect。这意味着这个useEffect 除了其中的return 语句之外什么都没有，它将我必须的各种State 变量设置为它们的默认值。

例子：

useEffect(() => {
    if (isMounted) {
        const unsubscribe = streamCourses({
          next: (querySnapshot) => {
            const task = querySnapshot.docs.map((docSnapshot) => 
                mapDocTask(docSnapshot)
              );
            setCourseDetails(task);
          },
          error: (error) => console.log(error),
        });
        return unsubscribe;
    }
  }, [setCourseDetails]);

useEffect(() => {
    return () => {
        setCourseDetails(null);
        setIsMounted(false);
    }
}, []);