使用過antd的大佬們肯定都遇到過很多坑，今天來看一下Carousel走馬燈的坑。

問題：
如果是寫死的數(shù)據(jù)，不存在bug。
如果是服務(wù)器請求的數(shù)據(jù)則無法觸發(fā)圖片自動輪播，必須手動滑動一張才有效果。

思路：
寫死的數(shù)據(jù)不存在異步？能直接拿到數(shù)據(jù)？
服務(wù)器請求的數(shù)據(jù)存在異步？DOM渲染之后發(fā)現(xiàn)數(shù)據(jù)length為0？系統(tǒng)判定沒有數(shù)據(jù)則不觸發(fā)輪播？

測試：
componentDidMount鉤子函數(shù)中打印請求到的數(shù)組，發(fā)現(xiàn)length為0，于是在componentDidUpdate鉤子函數(shù)中再去看一次發(fā)現(xiàn)length發(fā)生了變化。
利用這個length的變化我們可以通過調(diào)用setState，在初始時給定一個初始狀態(tài)homeFlag并改變它（看第三步）。

自動輪播效果實現(xiàn)，bug解決。

代碼：
1、容器組件代碼（api是封裝的請求數(shù)據(jù)的方法）

111.png

2、UI組件代碼（父組件給子組件傳值）

222.png

3、走馬燈組件代碼（antn-mobile的carousel，關(guān)鍵點在componentDidUpdate鉤子函數(shù)）
這里需要注意的是千萬要避免死循環(huán)，因為你手動修改了state，就會再次觸發(fā)該階段鉤子函數(shù)，所以必須給定一個合理的終止條件！

333.png

4、封裝的請求數(shù)據(jù)代碼

444.png

關(guān)鍵點還是看對生命周期鉤子函數(shù)的理解，覺得有用點贊！