Javascript 反应时间间隔内存泄漏
我创建了一个倒计时计时器组件,将数据传递给另一个组件,并使用Javascript 反应时间间隔内存泄漏,javascript,reactjs,react-hooks,Javascript,Reactjs,React Hooks,我创建了一个倒计时计时器组件,将数据传递给另一个组件,并使用setTimeout。组件按预期工作,但“我的控制台”中出现警告: 警告:无法对已卸载的组件执行React状态更新。这是一个no-op,但它表示应用程序中存在内存泄漏。要修复此问题,请取消useEffect清理函数中的所有订阅和异步任务 当我在useffect中使用setTimeout时,我试图在返回函数中添加clearInterval,但这似乎没有帮助。下面您可以找到我的组件: export default function crea
setTimeout
。组件按预期工作,但“我的控制台”中出现警告:
警告:无法对已卸载的组件执行React状态更新。这是一个no-op,但它表示应用程序中存在内存泄漏。要修复此问题,请取消useEffect清理函数中的所有订阅和异步任务
当我在useffect
中使用setTimeout
时,我试图在返回函数中添加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(() => {
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;
};
}, []);
您可以在此处查看我的完整答案“清除React Hooks中未安装组件上的内存泄漏:需要从提供给
useffect
的函数返回useffect
钩子[1]的清除函数。您正在将清除函数返回给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(() => {
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);
};
}, []);
[1] 对于
效果
,您不需要createRef
。并在间隔后返回
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(() => {
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);
};
}, []);
天哪,我怎么没注意到…)疯狂的我。。。感谢您关注@sdgluck