// 通过 useEffect 在页面加载时调用 getNodeDetailList();列表接口
useEffect(() => {
getNodeDetailList();
}, [change]);
// 然后通过 setInterval 来进行定时刷新
useEffect(() => {
const timer = setInterval(() => {
getNodeDetailList();
}, 30000);
return () => clearInterval(timer);
}, []);
还有一种是在页面添加一个倒计时的提示效果:
// 每30秒刷新一次接口,并实现倒计时
const [count, setCount] = useState(30); // 30秒刷新一次
useEffect(() => {
const timer = setInterval(() => {
setCount(count - 1);
}, 1000); // 每一秒,count减1
if (count === 0) { // 当count等于0时,调用列表接口方法
setCount(30); // 重新赋值30秒
getNodeDetailList();
}
return () => clearInterval(timer);
}, [count]);
// 页面展示
<span style={{ marginLeft: 10 }}>刷新倒计时:{count}</span>