解決React通過ajax載入資料更新頁面不加判斷會報錯的問題

李文楊發表於2018-07-16
React

通過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 元素

 

相關文章