AJAXリクエストでReactコンポーネントのthis.state.dataが設定されていません。

Question

私は最近、ReactJSで作業していて、AJAXリクエストを使用しているときに設定状態に問題があります。

AJAXリクエストはサーバー上で200個のコードをリクエストしているため、APIリクエストがうまく機能しています。しかし、Reactコンポーネントにはthis.state.dataが設定されていないようです。ここで

は、コンポーネントのコードです：

export class Experiences extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     data: [] 
    }; 
    } 

    loadExperiencesFromServer() { 
    $.ajax({ 
     url: this.props.url, 
     dataType: 'json', 
     cache: false, 
     success: (data) => { 
     this.setState({ 
      data: data 
     }) 
     }, 
     error: (xhr, status, err) => { 
       console.error(this.props.url, status, err.toString()); 
     } 
    }); 
    } 

    componentDidMount() { 
    this.loadExperiencesFromServer(); 
    } 

    render() { 
    return (
     <div className="commentBox"> 
     <h1>Comments</h1> 
      <p>{this.state.data}</p> 
     </div> 
    ); 
    } 
}; 

そして、これは私がコンポーネントをレンダリングしています方法です：

ReactDOM.render(<Experiences url='/about_me/experiences/' />, document.getElementById('genomics-geek-container')); 

私が直接APIを打つとき、私はこの応答を取得：

$ http http://127.0.0.1:8000/about_me/experiences/ 

HTTP/1.0 200 OK 
Allow: GET, POST, HEAD, OPTIONS 
Content-Type: application/json 
Date: Wed, 27 Apr 2016 02:15:40 GMT 
Server: WSGIServer/0.2 CPython/3.5.1 
Vary: Accept, Cookie 
X-Frame-Options: SAMEORIGIN 

{ 
    "count": 1, 
    "next": null, 
    "previous": null, 
    "results": [ 
     { 
      "company": "Mike", 
      "created": "2016-04-27T01:30:50.425111Z", 
      "degree": "test", 
      "description": "test", 
      "ended": "2016-04-21", 
      "experience_type": 1, 
      "is_current_position": true, 
      "location": "test", 
      "owner": "geek", 
      "position": "test", 
      "started": "2016-04-27" 
     } 
    ] 
} 

APIがデータを返していてReactコンポーネントがブラウザに表示されているがデータは表示されていない何らかの理由でコンポーネントにロードされています。私は何が欠けていますか？助けを前にありがとう！

Answer 1

あなたはこれの文脈を失っています。カスタム関数へのあなたのコンストラクタバインドで

この

constructor() { 
    super(); 
    this.state = { 
     data: [] 
    }; 
    this.loadExperiencesFromServer = this.loadExperiencesFromServer.bind(this) 
}