[英]React Hooks setInterval memory leak
我创建了一个倒数计时器组件,将数据传递给另一个组件,我使用setTimeout
。 该组件按预期工作,但我的控制台中出现警告:
警告:无法对未安装的组件执行 React state 更新。 这是一个无操作,但它表明您的应用程序中存在 memory 泄漏。 要修复此问题,请在 useEffect 清理 function 中取消所有订阅和异步任务。
当我在useEffect
中使用setTimeout
时,我尝试在返回 function 中添加clearInterval
,但这似乎没有帮助。 您可以在下面找到我的组件:
export default function createEvent(WrappedComponent) {
const Event = props => {
const [{ endDate }] = useState(props);
const [days, setDays] = useState('');
const [hours, setHours] = useState('');
const [minutes, setMinutes] = useState('');
const [seconds, setSeconds] = useState('');
const interval = useRef();
useEffect(() => {
interval.current = setInterval(() => {
const date = moment.unix(endDate).format('MM DD YYYY, h:mm a');
const then = moment(date, 'MM DD YYYY, h:mm a');
const now = moment();
const countdown = moment(then - now);
const daysFormat = countdown.format('D');
const hoursFormat = countdown.format('HH');
const minutesFormat = countdown.format('mm');
const secondsFormat = countdown.format('ss');
setDays(`${daysFormat} days`);
setHours(hoursFormat);
setMinutes(minutesFormat);
setSeconds(secondsFormat);
return () => {
clearInterval(interval.current);
interval.current = null;
};
}, 1000);
}, []);
return (
<WrappedComponent
days={days}
hours={hours}
minutes={minutes}
seconds={seconds}
{...props}
/>
);
};
return Event;
}
如果我尝试通过在最后一个下方添加另一个useEffect
来从其他地方模仿 clear,如下所示:
useEffect(() => {
setTimeout(() => clearInterval(interval.current), 15000)
}, [])
警告消失,但倒计时将不再起作用。 那么我该如何做到这一点,不影响倒计时并清除警告呢?
需要从您提供给 useEffect 的 function 中返回用于useEffect
挂钩 [1] 的清理useEffect
。 您将在 function 中返回您的清理 function 给setInterval
。
useEffect(() => {
interval.current = setInterval(() => {
const date = moment.unix(endDate).format('MM DD YYYY, h:mm a');
const then = moment(date, 'MM DD YYYY, h:mm a');
const now = moment();
const countdown = moment(then - now);
const daysFormat = countdown.format('D');
const hoursFormat = countdown.format('HH');
const minutesFormat = countdown.format('mm');
const secondsFormat = countdown.format('ss');
setDays(`${daysFormat} days`);
setHours(hoursFormat);
setMinutes(minutesFormat);
setSeconds(secondsFormat);
}, 1000);
// move clean up function to here:
return () => {
clearInterval(interval.current);
interval.current = null;
};
}, []);
useEffect(() => {
interval.current = setInterval(() => {
const date = moment.unix(endDate).format('MM DD YYYY, h:mm a');
const then = moment(date, 'MM DD YYYY, h:mm a');
const now = moment();
const countdown = moment(then - now);
const daysFormat = countdown.format('D');
const hoursFormat = countdown.format('HH');
const minutesFormat = countdown.format('mm');
const secondsFormat = countdown.format('ss');
setDays(`${daysFormat} days`);
setHours(hoursFormat);
setMinutes(minutesFormat);
setSeconds(secondsFormat);
}, 1000);
// Attention : return function cleanup for the function used in useEffect()
return () => {
clearInterval(interval.current);
interval.current = null;
};
}, []);
您可以在此处查看我的完整答案“Cleanup memory 在 React Hooks 中的未安装组件上泄漏” : https://stackoverflow.com/a/59956926/4386148
您不需要createRef
effects
。 并且返回应该after the interval
。
useEffect(() => {
const timer = setInterval(() => {
const date = moment.unix(endDate).format('MM DD YYYY, h:mm a');
const then = moment(date, 'MM DD YYYY, h:mm a');
const now = moment();
const countdown = moment(then - now);
const daysFormat = countdown.format('D');
const hoursFormat = countdown.format('HH');
const minutesFormat = countdown.format('mm');
const secondsFormat = countdown.format('ss');
setDays(`${daysFormat} days`);
setHours(hoursFormat);
setMinutes(minutesFormat);
setSeconds(secondsFormat);
}, 1000);
return () => {
clearInterval(timer);
};
}, []);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.