React AJAX 簡單演示

React 組件的數據可以通過 componentDidMount 方法中的 Ajax 來獲取，當從服務端獲取數據時可以將數據存儲在 state 中，再用 this.setState 方法重新渲染 UI。
當使用非同步載入數據時，在組件卸載前使用 componentWillUnmount 來取消未完成的請求。

下麵這個案例用到了jQuery，所以安裝jQuery先

npm i jquery -S

引入jQuery

import $ from  'jquery'

import React, { Component,Fragment } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import $ from  'jquery';

class User extends Component{
  constructor(props){
    super(props);
    this.state={
      username:'',
      userUrl:''
    }
  }

  //組件掛載完成後
  componentDidMount(){
    this.myAjax=$.get(this.props.source,res=>{
      var lastGist=res[0];
      console.log(lastGist);
      this.setState({
        username:lastGist.owner.login,
        userUrl:lastGist.html_url
      })
    })
  }

  //組件將要卸載前
  componentWillUnmount(){
    //取消未完成的請求
    this.myAjax.abort();
  }

  render(){
    return(
      <Fragment>
        <div>用戶賬號：{this.state.username}</div>
        <a href={this.state.userUrl}>用戶網址：{this.state.userUrl}</a>
      </Fragment>
    )
  }
}

  ReactDOM.render(
    <div>
       <User source="https://api.github.com/users/octocat/gists" />  
    </div>,
    document.getElementById('example')
  );

serviceWorker.unregister();

可以使用之前知識列出所有條目

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import $ from  'jquery';

class User extends Component{
  constructor(props){
    super(props);
    this.state={
      username:[],
      userUrl:[]
    }
  }

  //組件掛載完成後
  componentDidMount(){
    this.myAjax=$.get(this.props.source,res=>{
      var lastGist=res;
      var usernames=[];
      var userUrls=[];

      lastGist.map(
        function proc(item){
          usernames.push(item.owner.login);
          userUrls.push(item.html_url);
          return item;
        }
      )

      this.setState({
        username:usernames,
        userUrl:userUrls
      })
    })
  }

  //組件將要卸載前
  componentWillUnmount(){
    //取消未完成的請求
    this.myAjax.abort();
  }

  render(){
    var names=this.state.username;
    var urls=this.state.userUrl;
    return(
      <ul>
        {
          names.map(
            function(item,index){
              return(
                <div key={index}>
                  <li>{item}</li>
                  <a href={urls[index]} rel="nofollow">{urls[index]}</a>
                </div>
              )
            }
          )
        }
      </ul>
    )
  }
}

  ReactDOM.render(
    <div>
       <User source="https://api.github.com/users/octocat/gists" />  
    </div>,
    document.getElementById('example')
  );

serviceWorker.unregister();