解決React經過ajax加載數據更新頁面不加判斷會報錯的問題

經過AJAX加載數據是一個很廣泛的場景。在React組件中如何經過AJAX請求來加載數據呢？首先，AJAX請求的源URL應該經過props傳入；其次，最好在componentDidMount函數中加載數據。加載成功，將數據存儲在state中後，經過調用setState來觸發渲染更新界面。

AJAX一般是一個異步請求，也就是說，即便componentDidMount函數調用完畢，數據也不會立刻就得到，瀏覽器會在數據徹底到達後才調用AJAX中所設定的回調函數，有時間差。所以能夠使用 componentWillUnmount 來取消任何未完成的請求；

componentDidMount: function() {
    this.serverRequest = $.get(this.props.source, function (result) {
      var lastGist = result[0];
      this.setState({
        username: lastGist.owner.login,
        lastGistUrl: lastGist.html_url
      });
    }.bind(this));
  },
 
  componentWillUnmount: function() {
    this.serverRequest.abort();
  }

官網是這麼解釋的

When fetching data asynchronously, use componentWillUnmount to cancel any outstanding requests before the component is unmounted.

 

當異步加載數據的時候， 使用 componentWillUnmount 來取消任何未完成的請求 在組件卸載以前

 

 componentWillUnmount()

 

在組件從 DOM 中移除的時候馬上被調用。

在該方法中執行任何須要的清理，好比無效的定時器，或者清除在 componentDidMount 中建立的 DOM 元素