为什么setTimeOut不通过使用清除函数(useEffect)来清除？
为什么setTimeOut不通过使用清除函数(useEffect)来清除？
提问于 2020-05-12 05:55:13
我希望在卸载组件时清除所有的setTimeOut。尽管我使用clearTimeOut作为清理函数，但错误仍然是persis：“警告:不能对卸载的组件执行响应状态更新。这是一个无操作，但它表示应用程序中存在内存泄漏。要修复，请取消useEffect清理函数”“中的所有订阅和异步任务。
useEffect(() => {
const timeOut = {timeout1: ()=>setTimeout(() => setProgress((preV) => preV + 15), [
550,
]),timeout2 : ()=> setTimeout(() => setMessage("All most done"), [500])}
timeOut.timeout1();
timeOut.timeout2();
return () => {
clearTimeout(timeOut.timeout1);
clearTimeout(timeOut.timeout2);
};
}, [progress,message]);有人知道如何解决这个问题吗？任何帮助都将不胜感激！
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-05-12 06:00:30
timeout1不是存储setTimeout的返回值，即timerId，而是存储执行超时的函数的引用
您可以使用Immediately invoked functions立即执行超时的方式编写代码，以便timeout1和timeout2具有timerIds
useEffect(() => {
const timeOut = {
timeout1: (()=>setTimeout(() => setProgress((preV) => preV + 15), 550))(),
timeout2 : (()=> setTimeout(() => setMessage("All most done"), 500))()
}
return () => {
clearTimeout(timeOut.timeout1);
clearTimeout(timeOut.timeout2);
};
}, [progress,message]);但是，您可以简单地运行超时，而不必将它们写成生命。
useEffect(() => {
const timeOut = {
timeout1: setTimeout(() => setProgress((preV) => preV + 15), 550),
timeout2 : ()=> setTimeout(() => setMessage("All most done"), 500)
}
return () => {
clearTimeout(timeOut.timeout1);
clearTimeout(timeOut.timeout2);
};
}, [progress,message]);Stack Overflow用户
发布于 2020-05-12 06:07:16
如何使用一个局部变量来跟踪组件是否已挂载。
useEffect(() => {
let run = true;
const timeOut = {
timeout1: () => setTimeout(() => setProgress((preV) => preV + 15), [550]),
timeout2: () => setTimeout(() => setMessage('All most done'), [500]),
};
if (run) {
timeOut.timeout1();
timeOut.timeout2();
}
return () => {
clearTimeout(timeOut.timeout1);
clearTimeout(timeOut.timeout2);
run = false;
};
}, [progress, message]);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61744748
复制相关文章
相似问题
腾讯云开发者
