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

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