الرد أجاكس

رد فعل يمكن الحصول على البيانات المكونة من طريقة componentDidMount اياكس، في حين أن الوصول إلى قاعدة البيانات من الخادم يمكن تخزين البيانات في الدولة، ومن ثم إعادة تقديم-طريقة this.setState واجهة المستخدم.

عند استخدام غير متزامن تحميل البيانات، تفريغ التجمع قبل الاستخدام componentWillUnmount إلى إلغاء الطلبات المعلقة.

يوضح المثال التالي احصل على أحدث جوهر جيثب حصة المستخدمين الوصف:

var UserGist = React.createClass({
  getInitialState: function() {
    return {
      username: '',
      lastGistUrl: ''
    };
  },

  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();
  },

  render: function() {
    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" />,
  mountNode
);

محاولة »

يستخدم رمز أعلاه اكتمال طلب مسج اياكس.