ParseReact實作（三）--將gmap放入react.js中

想show出固定座標的gmap，但是show出這個component之前需要先initialize，所以我在TodoList中加入initial function 

出現這樣的訊息

Warning: getInitialState was defined on TodoList, a plain JavaScript class. This is only supported for classes created using React.createClass. Did you mean to define a state property instead?

由於TodoList為了要使用observe()，是經由extend ParseComponent的class

                                  

https://medium.com/@kevintcoughlin/working-with-state-in-react-0-13-747fd594892

所以我想把initial的部分放到map裡面

先搞懂component的life cycle

Mounting （插入真實DOM節點）掛載流程

1.getInitialState()：當物件被調用時此方法會在寫入 DOM 之前被觸發，通常用來管理狀態的元件可以用這個方法初始化資料。

2.componentWillMount：當元件內部的結構處理完畢準備寫入 DOM 之前觸發。

3.componentDidMount(DOMElement rootNode)：當元件被寫入 DOM 之後觸發。當初始化需要操作 DOM 元素就可以用這個方法。

Updating 更新流程

1.componentWillReceiveProps(nextProps)：已掛載的元件收到新的 props 時被觸發。在這個方法裡你通常會去比較 this.props 和 nextProps 然後再用 this.setState 去改變狀態。

2.shouldComponentUpdate(nextProps, nextState)：這個函式需要回傳一個布林值，當元件判斷是否需要更新 DOM 時會被觸發。你可以在這個方法裡面去比較 this.props，this.state，nextProps，nextState 來決定是否需要更新，回傳 false 則會跳過此次觸發不更新，如果你什麼都不回傳預設會當做 false 。

3.componentWillUpdate：例如在上面 shouldComponentUpdate 你回傳了 true ，元件確定要更新了，在準備更新前這個方法會被觸發。

4.componentDidupdate(prevProps, prevState, rootNode)：更新後觸發。

Unmounting 卸載流程

componentWillUnmount()：當元件準備要被移除或破壞時觸發。

掛載後才能使用的方法

所以我把code改成這樣 

結果

這表示其實在todolist中，是有render到<Map/>這個class的，
我不信邪，把console log加入所有function中

果不其然

表示都有跑啊！！！gmap你到底死哪裡去啦
為什麼沒瓣法show出元件呢？救救我.........

11/16更新
找到答案了！！！！其實元件週期沒有錯，錯在於傳入gmap的時候就必須設定他的長跟寬。
這麼說好了，我們現在是在react裡面使用gmap.js去產生一個圖檔（地圖）然後傳給react的元件，去render他，使他出現在頁面上。
所以我們將render的部分改成

於是.........

出來了！！！！此刻我真的好想哭.........


其實會要發現這個小問題真的不容易，有時我常常debug一直會在自己的圈圈裡打轉，認為問題就是出在哪裡哪裡，卻總是忘記應該要從最底層開始，這次有主管的幫忙，我們從最底層的html開始改起，把map這個tag直接放在html裡面，在網頁上找到這個tag卻發現！這個map居然是1451*0！所以沒有設定他的長跟寬是永遠顯示不出來的！

大家要照步驟來喔～～～～～bug是很難找滴


引用：http://andyyou.logdown.com/tags/ReactJS