React+Hook+ts+antDesign实现伪定时调用接口功能

简介: React+Hook+ts+antDesign实现伪定时调用接口功能

定义循环时长

说一下整体实现思路吧 定义定时器执行时间的状态 这里是十秒 可以通过接口配置调用


const [delay, setDelay] = useState(10000)


定义分页

const [pageIndex, setPageIndex] = useState(0)


核心代码实现

分页变化调用接口


``` const timer = setInterval(() => { if (pageIndex == total) {
setPageIndex(0)
    // setVisable(visable++)
  } else {
    setPageIndex(pageIndex + 1)
  }
}, delay)
return () => clearInterval(timer)
// }else{
//   const time1 = setInterval(() => {
//     initMenuList()
//   }, delay)
//   return () => clearInterval(time1)
// }
}, [pageIndex, total]) ```
useEffect(() => { initMenuList(); }, [pageIndex]);
``` const initMenuList = async () => { const response = await postScreenList({ pageIndex: pageIndex, pageSize: 1, bedCodeList: ["CC001"] }); console.log(response, "response");
if (response.code == 200) {
  setMenuList(response.data);
  setTotal(response.total)
  // setPages(response.pages)
  // setCurrent(response.current)
}
}; ```


备注

接口中的数据返回的response.total当数据未空时候 返回为1 其他正常返回 这样就能实现定时器的永动了


image.png


总结

我是歌谣 放弃很容易 但是坚持一定很酷


相关文章
|
8月前
|
前端开发
React查询、搜索类功能的实现
React查询、搜索类功能的实现
71 0
|
8月前
|
前端开发
vue+ts或者react+ts如何使用animate.css
vue+ts或者react+ts如何使用animate.css
108 0
|
5月前
|
前端开发
React使用useRef ts 报错
【8月更文挑战第17天】
89 4
|
4月前
|
资源调度 JavaScript 前端开发
使用vite+react+ts+Ant Design开发后台管理项目(二)
使用vite+react+ts+Ant Design开发后台管理项目(二)
|
5月前
|
前端开发 C++
使用 Vite 创建 React+TS+SW 项目并整合 AntDesign 、Scss 等组件或插件
本文记录了如何使用Vite创建一个React+TypeScript+Service Workers(SW)项目,并整合AntDesign组件库和Scss等插件,包括项目的创建、配置问题解决、AntDesign和Scss的整合方法。
337 1
|
5月前
|
前端开发
React 中的 Hook 概念
【8月更文挑战第31天】
43 0
|
6月前
|
前端开发
React useImperativeHandle Hook
【7月更文挑战第1天】React useImperativeHandle Hook
32 3
|
6月前
|
前端开发 JavaScript 数据格式
react18【系列实用教程】Hooks (useState,useReducer,useRef,useEffect,useContext,useMemo,useCallback,自定义 Hook )
react18【系列实用教程】Hooks (useState,useReducer,useRef,useEffect,useContext,useMemo,useCallback,自定义 Hook )
113 1
|
8月前
|
前端开发
React 仿淘宝图片放大镜功能
React 仿淘宝图片放大镜功能
137 0
|
6月前
|
前端开发
Vue3 【仿 react 的 hook】封装 useTitle
Vue3 【仿 react 的 hook】封装 useTitle
64 0