上述事件的另外一种写法：

class UserGist extends React.Component {
    constructor(props) {
        super(props);
        //在state设置两个属性，以便后续通过state对象来对其进行修改
        this.state = {username: '', lastGistUrl: ''};
        //绑定挂载事件
        this.componentDidMount = this.componentDidMount.bind(this);
    }

    componentDidMount() {
        //接下来操作state时上下文对象发生改变，此处拿到操作句柄
        var that = this;
        //ajax请求
        this.serverRequest = $.ajax({
            url: this.props.source, 
            type:"GET",
            dataType: 'jsonp',
            success: function (result) {
                console.log(result.data);
                var lastGist = result.data[0];
                //此处的上下文发生改变，this的指针指向发生了变化，通过上述定义的that来操作
                that.setState({
                    username: lastGist.owner.login,
                    lastGistUrl: lastGist.html_url
                })
            }
        })
    }

    //卸载React组件时，把多余请求关闭，以免影响其他框架或组件的操作
    componentWillUnmount() {
        this.serverRequest.abort();
    }

    render() {
        return (
            <div>
            {this.state.username} 用户最新的 Gist 共享地址：
            <a href={this.state.lastGistUrl} rel="nofollow">{this.state.lastGistUrl}</a>
            </div>
        );
    }
}

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

尝试一下 »

可以使用之前知识列出所有条目:

class UserGist extends React.Component {
  constructor(props) {
      super(props);
      this.state = {username: [], lastGistUrl: []};
  }
 
  componentDidMount() {
    this.serverRequest = $.get(this.props.source, function (result) {
      var lastGist = result;
      var users = [];
      var urls = [];
      lastGist.map(
          function proc(item) {
            users.push(item.owner.login);
            urls.push(item.html_url);
        }
      );
      
      this.setState({
        username: users,
        lastGistUrl: urls
      });
    }.bind(this));
  }
 
  componentWillUnmount() {
    this.serverRequest.abort();
  }
 
  render() {
      var users = this.state.username;
    var urls = this.state.lastGistUrl;
        return (
          <ul>
            {
              users.map(
                function(user, index) {
                return (
              <div>
                  <li> {user} </li> 
                        <a href={urls[index]}  rel="nofollow"> {urls[index]} </a>
                    </div>
                    );
                }
              )
            }
          </ul>
        );
  }
}
 
ReactDOM.render(
  <UserGist source="https://api.github.com/users/octocat/gists" />,
  document.getElementById('example')
);

尝试一下 »

有一種請求的寫法是直接使用 fetch，那麼就不需要依賴 jQuery 函式庫。

  componentDidMount() {
    fetch(this.props.source)
    .then(response => response.json())
    .then(result => {
      let lastGist = result[0];
      
      this.setState({
        username: lastGist.owner.login,
            lastGistUrl: lastGist.html_url
      });
    });
  }

卸載時，fetch 要實作 abort 可以參考這裡：

https://stackoverflow.com/questions/31061838/how-do-i-cancel-an-http-fetch-request

https://javascript.info/fetch-abort