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


总结

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


相关文章
|
6月前
|
前端开发
vue+ts或者react+ts如何使用animate.css
vue+ts或者react+ts如何使用animate.css
87 0
|
3月前
|
前端开发
React使用useRef ts 报错
【8月更文挑战第17天】
62 4
|
8天前
|
移动开发 前端开发 JavaScript
React DnD:实现拖拽功能的终极方案?
本文首发于微信公众号“前端徐徐”,介绍了一个强大的 React 拖拽库——React DnD。React DnD 帮助开发者轻松创建复杂的拖拽界面,适用于 Trello 风格的应用、列表重排序、可拖拽的 UI 组件等场景。文章详细介绍了 React DnD 的基本信息、主要特点、使用场景及快速上手指南。
28 3
React DnD:实现拖拽功能的终极方案?
|
2月前
|
移动开发 前端开发
react项目配合diff实现文件对比差异功能
在React项目中,可以使用`diff`库实现文件内容对比差异功能。首先安装`diff`库,然后在组件中引入并使用`Diff.diffChars`或`Diff.diffLines`方法比较文本差异。通过循环遍历`diff`结果,可以生成不同样式的HTML元素来高亮显示文本差异。
79 1
react项目配合diff实现文件对比差异功能
|
2月前
|
资源调度 JavaScript 前端开发
使用vite+react+ts+Ant Design开发后台管理项目(二)
使用vite+react+ts+Ant Design开发后台管理项目(二)
|
2月前
|
前端开发
React 中购物车功能实现(全选多选功能实现)
React 中购物车功能实现(全选多选功能实现)
36 2
|
2月前
|
存储 移动开发 前端开发
初探react,用react实现一个todoList功能
该文章通过创建一个TodoList应用来介绍React的基础知识,包括环境搭建、组件创建、状态管理和事件处理,并演示了如何使用React Hooks来优化组件逻辑。
|
3月前
|
前端开发
|
3月前
|
存储 JavaScript 前端开发
探索React状态管理:Redux的严格与功能、MobX的简洁与直观、Context API的原生与易用——详细对比及应用案例分析
【8月更文挑战第31天】在React开发中,状态管理对于构建大型应用至关重要。本文将探讨三种主流状态管理方案:Redux、MobX和Context API。Redux采用单一存储模型,提供预测性状态更新;MobX利用装饰器语法,使状态修改更直观;Context API则允许跨组件状态共享,无需第三方库。每种方案各具特色,适用于不同场景,选择合适的工具能让React应用更加高效有序。
67 0
|
3月前
|
前端开发 C++
使用 Vite 创建 React+TS+SW 项目并整合 AntDesign 、Scss 等组件或插件
本文记录了如何使用Vite创建一个React+TypeScript+Service Workers(SW)项目,并整合AntDesign组件库和Scss等插件,包括项目的创建、配置问题解决、AntDesign和Scss的整合方法。
194 1