antd-mobile走马灯不轮播问题解决办法

使用过antd的大佬们肯定都遇到过很多坑,今天来看一下Carousel走马灯的坑。

问题:
如果是写死的数据,不存在bug。
如果是服务器请求的数据则无法触发图片自动轮播,必须手动滑动一张才有效果。

思路:
写死的数据不存在异步?能直接拿到数据?
服务器请求的数据存在异步?DOM渲染之后发现数据length为0?系统判定没有数据则不触发轮播?

测试:
componentDidMount钩子函数中打印请求到的数组,发现length为0,于是在componentDidUpdate钩子函数中再去看一次发现length发生了变化。
利用这个length的变化我们可以通过调用setState,在初始时给定一个初始状态homeFlag并改变它(看第三步)。

自动轮播效果实现,bug解决。

代码:
1、容器组件代码(api是封装的请求数据的方法)


111.png

2、UI组件代码(父组件给子组件传值)


222.png

3、走马灯组件代码(antn-mobile的carousel,关键点在componentDidUpdate钩子函数)
这里需要注意的是千万要避免死循环,因为你手动修改了state,就会再次触发该阶段钩子函数,所以必须给定一个合理的终止条件!


333.png

4、封装的请求数据代码


444.png

关键点还是看对生命周期钩子函数的理解,觉得有用点赞!

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 7,402评论 0 7
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 12,103评论 0 25
  • 作为一个合格的开发者,不要只满足于编写了可以运行的代码。而要了解代码背后的工作原理;不要只满足于自己的程序...
    六个周阅读 12,700评论 1 33
  • 一:什么是闭包?闭包的用处? (1)闭包就是能够读取其他函数内部变量的函数。在本质上,闭包就 是将函数内部和函数外...
    xuguibin阅读 13,299评论 1 52
  • Lua 5.1 参考手册 by Roberto Ierusalimschy, Luiz Henrique de F...
    苏黎九歌阅读 14,754评论 0 38

友情链接更多精彩内容