antd-mobile Carousel 走馬燈 異步加載 不輪播解決辦法


問題描述:

最近項目使用了react, 然后有一個需求是需要展示一個購買輪播,然后我就找了antd-mobile這個組件來搭配(不得不吐槽,這個antd-mobile 我是看一次,吐槽一次,一點都不友好)

好,吐槽完了,下面開始進入正題。

用這個組件,我看demo挺簡單的,然后copy了他的demo,OK,沒問。 但是當我用服務器端獲取的數據來渲染時候,問題來了,居然不輪播了。我各種騷操作,最后發現是我們賦值的list,一進來初始默認的是空數組,默認最小高度,導致不輪播,而我們寫的靜態數據是默認就有,所以沒問題。

好了。查了下網上關於這個問題,最普遍就是說加一個狀態,然后根據這個狀態變化在componentDidUpdate這個鈎子來控制組件的顯示,因為我用的是hook,在useEffect里跟新這個list,還是不行。 最后我根據這個狀態來控制顯示與否的思路,最簡單思路用list是否有長度來控制這個組件,一樣達到效果,還不用專門根據一個狀態來控制。

下面是實例圖:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM