問題描述:
最近項目使用了react, 然后有一個需求是需要展示一個購買輪播,然后我就找了antd-mobile這個組件來搭配(不得不吐槽,這個antd-mobile 我是看一次,吐槽一次,一點都不友好)
好,吐槽完了,下面開始進入正題。
用這個組件,我看demo挺簡單的,然后copy了他的demo,OK,沒問。 但是當我用服務器端獲取的數據來渲染時候,問題來了,居然不輪播了。我各種騷操作,最后發現是我們賦值的list,一進來初始默認的是空數組,默認最小高度,導致不輪播,而我們寫的靜態數據是默認就有,所以沒問題。
好了。查了下網上關於這個問題,最普遍就是說加一個狀態,然后根據這個狀態變化在componentDidUpdate這個鈎子來控制組件的顯示,因為我用的是hook,在useEffect里跟新這個list,還是不行。 最后我根據這個狀態來控制顯示與否的思路,最簡單思路用list是否有長度來控制這個組件,一樣達到效果,還不用專門根據一個狀態來控制。
下面是實例圖: