如何修复、取消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布尔值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);
}
}, []);