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




相关文章
|
7月前
|
前端开发
vue+ts或者react+ts如何使用animate.css
vue+ts或者react+ts如何使用animate.css
102 0
|
7月前
|
前端开发 JavaScript
react 修改 antdesign 的 组件默认样式
react 修改 antdesign 的 组件默认样式
279 0
|
3月前
|
前端开发 JavaScript UED
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
在React或Vue中,若需在更改用户所属组后更新页面所有数据但不刷新整个页面,可以通过改变路由出口的key值来实现。在用户切换组成功后,更新key值,这会触发React或Vue重新渲染路由出口下的所有组件,从而请求新的数据。这种方法避免了使用`window.location.reload()`导致的页面闪烁,提供了更流畅的用户体验。
60 1
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
|
6月前
|
存储 缓存 前端开发
react怎么只让接口请求一次
react怎么只让接口请求一次
115 0
|
4月前
|
前端开发
React 中的 Hook 概念
【8月更文挑战第31天】
41 0
|
5月前
|
前端开发
React useImperativeHandle Hook
【7月更文挑战第1天】React useImperativeHandle Hook
32 3
|
5月前
|
前端开发 JavaScript 数据格式
react18【系列实用教程】Hooks (useState,useReducer,useRef,useEffect,useContext,useMemo,useCallback,自定义 Hook )
react18【系列实用教程】Hooks (useState,useReducer,useRef,useEffect,useContext,useMemo,useCallback,自定义 Hook )
107 1
|
5月前
|
前端开发
Vue3 【仿 react 的 hook】封装 useTitle
Vue3 【仿 react 的 hook】封装 useTitle
60 0
|
5月前
|
前端开发 API
Vue3 【仿 react 的 hook】封装 useLocation
Vue3 【仿 react 的 hook】封装 useLocation
46 0
|
7月前
|
前端开发 JavaScript
【边做边学】React Hooks (二)——useEffect Hook
【边做边学】React Hooks (二)——useEffect Hook