react---之下拉菜單默認選中的值始終不變的問題


需求:點擊下拉菜單,出來主題列表選項,如果一個后台返回的組織已經有主題,那就默認選中該條選項。如果沒有主題,那么默認第一個主題。
問題:后台返回了有主題的數據,但是下拉菜單一直顯示是默認主題。
正確應顯示下圖(由於下拉列表會把下拉組件擋住,所以這邊分開截圖)。
如圖:下拉框

 

下拉列表(測試數據)

主要代碼如下:

select 是一個公用的下拉組件,在調用的時候傳了defaultValue的值是掛載在state上的themeId

state上的themeId取值是后台返回的:

 

問題原因:
經過定位發現,應該是生命周期的問題,defaultValue,是頁面渲染只能改變一次的值,在組件render之前是沒有取到數據的,所以我給的是默認主題,render之后才會執行componentDidMount周期函數,此時我才拿到數據,但是defaultValue只能改變一次,我拿到數據后再去改變主題的值已經不起效了。

解決方案:
react是先執行render,再執行componentDidMount的,那么我在沒加載到數據之前,不去render,由於數據結構的原因,我在組件render的時候加了如下代碼

 

如上問題就解決了。

總結:組件的生命周期被實例話的時候執行的順序是:

1、getDefaultProps
2、getInitialState
3、componentWillMount
4、render
5、componentDidMount 

是先執行render渲染頁面的dom,然后再執行componentDidMount這個生命周期方法的。

 


免責聲明!

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



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