【React工作记录八十五】React+Hook+ts+antDesign实现伪定时调用接口功能

简介: 【React工作记录八十五】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


总结

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

相关文章
|
2月前
|
前端开发
React查询、搜索类功能的实现
React查询、搜索类功能的实现
38 0
|
2月前
|
前端开发
vue+ts或者react+ts如何使用animate.css
vue+ts或者react+ts如何使用animate.css
45 0
|
2月前
|
人工智能 JSON 前端开发
react17+ts 学习
react17+ts 学习
|
28天前
|
存储 缓存 前端开发
react怎么只让接口请求一次
react怎么只让接口请求一次
22 0
|
2月前
|
前端开发
React 仿淘宝图片放大镜功能
React 仿淘宝图片放大镜功能
|
2月前
|
存储 前端开发 JavaScript
【亮剑】在React中,处理`onScroll`事件可实现复杂功能如无限滚动和视差效果
【4月更文挑战第30天】在React中,处理`onScroll`事件可实现复杂功能如无限滚动和视差效果。类组件和函数组件都能使用`onScroll`,通过`componentDidMount`和`componentWillUnmount`或`useEffect`添加和移除事件监听器。性能优化需注意节流、防抖、虚拟滚动、避免同步计算和及时移除监听器。实战案例展示了如何用Intersection Observer和`onScroll`实现无限滚动列表,当最后一项进入视口时加载更多内容。合理利用滚动事件能提升用户体验,同时要注意性能优化。
|
2月前
|
JavaScript 前端开发
在React和Vue中实现锚点定位功能
在React和Vue中实现锚点定位功能
54 1
|
2月前
|
前端开发 JavaScript
React 配置别名 @ ( js/ts 项目中通过 webpack.config.js 配置)
React 配置别名 @ ( js/ts 项目中通过 webpack.config.js 配置)
50 0
|
2月前
|
JavaScript 前端开发
React 创建 js 与 ts 项目
React 创建 js 与 ts 项目
35 0
|
2月前
|
自然语言处理 前端开发 JavaScript
说说你对 React Hook的闭包陷阱的理解,有哪些解决方案?
说说你对 React Hook的闭包陷阱的理解,有哪些解决方案?
65 0