import { useEffect, useState } from "react";
function App() {
const [mytime, setMytime] = useState(0);
useEffect(() => {
// create a interval and get the id
const myInterval = setInterval(() => {
setMytime((prevTime) => prevTime + 1);
}, 1000);
// clear out the interval using the id when unmounting the component
return () => clearInterval(myInterval);
}, []);
return <div> {mytime} </div>;
}
export default App;
2条答案
按热度按时间f4t66c6m1#
问题
每次当
mytime
更改以重新呈现时(当您调用setMytime
时),setInterval
都会被调用。并且setInterval
调用的数量呈指数级增长。这也会导致内存泄漏。溶液
你应该只运行一次。你应该使用一个空的依赖数组的
useEffect
钩子。像这样试试。
gab6jxml2#
为了扩展@Amila的回答,
使用
functions
设置start
,stop
,reset
定时器怎么办?1.确保使用
useRef()
,因为useState()
将导致渲染。1.请确保卸载
useState()
中的间隔,因为这将导致跳过计时器。使用以下代码: