我那里有一个小问题，我不知道为什么我的解决方案无法正常工作。这是代码：
const [progress, setProgress] = useState(0);
useEffect(() => {
let isMounted = true;
if(isMounted === true) {
progress < 100 && setTimeout(() => setProgress(progress + 1), 20);
}
return () => isMounted = false;
}, [progress]);
我在那里执行setTimeout异步操作。我想每20毫秒将进度状态设置为1。仅此而已。我还添加了isMounted包含组件状态的变量。
问题是，当说时，我安装了此组件，并且在1s或2后立即卸载了该组件，然后我没有收到此错误。如果我等待更长的时间并卸下组件（在setTimeout有时间将进度状态更改为100（这是限制）之前），则会出现此错误。
为什么此错误以这种奇怪的方式出现？
当组件在安装时和未安装时已明确通信时，为什么还会出现此错误？
您需要清除清理中的超时或isMounted在超时本身内使用变量。
清除超时：
useEffect(() => {
let timeout;
if (progress < 100) {
timeout = setTimeout(() => {
setProgress(progress + 1)
}, 20);
}
return () => { clearTimeout(timeout) };
}, [progress]);
使用isMounted变量：
useEffect(() => {
let isMounted = true;
if (progress < 100) {
setTimeout(() => {
if (isMounted) setProgress(progress + 1);
}, 20)
}
return () => { isMounted = false };
}, [progress]);
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句