javascript - 如何修复、取消 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 bool 值isMounted设置为 true默认情况下，用于包装我的 useEffect 的内容这样我的useEffect的内容仅当屏幕为 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);
    }
}, []);