AJAX-Anforderung setzt this.state.data nicht in meiner React-Komponente.

Question

Ich habe vor kurzem mit ReactJS gearbeitet und habe ein Problem mit dem Setzen des Status bei der Verwendung einer AJAX-Anfrage.

Die AJAX-Anfrage stellt eine Anfrage auf dem Server und erhält 200-Code, daher weiß ich, dass die API-Anfrage gut funktioniert. Die React-Komponente scheint jedoch nicht dieses.state.data-Set zu enthalten. Hier

ist der Komponentencode:

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

Und das ist, wie ich die Komponente bin Rendering:

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

Wenn ich die API direkt getroffen, erhalte ich diese Antwort:

$ 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" 
     } 
    ] 
} 

So weiß ich, dass die API Daten zurückgibt und die React-Komponente in meinem Browser gerendert wird, aber keine Daten wird aus irgendeinem Grund in die Komponente geladen. Was vermisse ich? Vielen Dank im Voraus für die Hilfe!

Answer 1

Sie verlieren den Kontext davon.

in Ihrem Konstruktor binden diese an Ihre benutzerdefinierte Funktion

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