React AJAX

简介: React AJAX

React组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取,当从服务端获取数据时可以将数据存储在 state 中,再用 this.setState 方法重新渲染 UI。


当使用异步加载数据时,在组件卸载前使用 componentWillUnmount 来取消未完成的请求。


以下实例演示了获取 Github 用户最新 gist 共享描述:

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[0];
      this.setState({
        username: lastGist.owner.login,
        lastGistUrl: lastGist.html_url
      });
    }.bind(this));
  }
  componentWillUnmount() {
    this.serverRequest.abort();
  }
  render() {
    return (
      <div>
        {this.state.username} 用户最新的 Gist 共享地址:
        <a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a>
      </div>
    );
  }
}
ReactDOM.render(
  <UserGist source="https://api.github.com/users/octocat/gists" />,
  document.getElementById('example')
);
相关文章
|
4月前
|
存储 JSON 前端开发
React AJAX
10月更文挑战第10天
18 1
|
5月前
|
JSON 前端开发 JavaScript
06_React ajax
06_React ajax
20 0
|
5月前
|
前端开发
React技术栈-react使用的Ajax请求库用户搜索案例
这篇文章展示了一个React技术栈中使用Ajax请求库(如axios)进行用户搜索的实战案例,包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
47 7
React技术栈-react使用的Ajax请求库用户搜索案例
|
5月前
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
79 10
|
前端开发 CDN
【React】归纳篇(八)在React中发送Ajax请求-axios | fetch | 练习-写一个搜索请求
【React】归纳篇(八)在React中发送Ajax请求-axios | fetch | 练习-写一个搜索请求
333 0
【React】归纳篇(八)在React中发送Ajax请求-axios | fetch | 练习-写一个搜索请求
|
9月前
|
前端开发 JavaScript
Jquery ajax捕获错误信息
Jquery ajax捕获错误信息
75 0
|
9月前
|
JSON 缓存 前端开发
Jquery中AJAX的应用
Jquery中AJAX的应用
91 0
|
9月前
|
JSON 前端开发 JavaScript
jQuery中ajax的使用
jQuery中ajax的使用
|
9月前
|
XML JavaScript 前端开发
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
122 0
|
9月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
217 0