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

下拉列表(測試數據)
主要代碼如下:
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這個生命周期方法的。