ReactJS Daten nicht vom Server abrufen, wenn 'URL' Attribut

Question

Ich bin ein Anfänger von ReactJS und nur mit the example code on React's official site starten. Wenn ich den Code in Abschnitt 'Fetching from the server' versuche, kann ich es nicht zum Laufen bringen.

Ich habe versucht, sowohl die relativen Pfad

React.render(
    <CommentBox url="../data/data.json" />, 
    document.getElementById('content') 
); 

und absoluten Pfad

React.render(
    <CommentBox url="http://localhost/path/to/data.json" />, 
    document.getElementById('content') 
); 

Aber keine von ihnen korrekt ausgeführt wird. Als ich im Chrome-Entwicklungstool das Fenster "Netzwerk" auscheckte, sah ich, dass die Seite nicht einmal die Anforderung für data.json gesendet hatte. Also habe ich einen Fehler von Cannot read property 'comments' of undefined bekommen.

mehr Code:

var Comment = React.createClass({ 
    render: function() { 
    return (
     <div className="comment"> 
     from {this.props.author} <br/> 
     {this.props.children} 
     </div> 
    ); 
    } 
}); 

var CommentList = React.createClass({ 
    render: function() { 
    var commentNodes = this.props.comments.map(function(comment){ 
     return (
     <Comment author={comment.author}> 
      {comment.text} 
     </Comment> 
    ); 
    }); 
    return (
    <div className="comment-list"> 
     {commentNodes} 
    </div> 
    ); 
    } 
}); 

var CommentForm = React.createClass({ 
    render: function() { 
    return (
     <div className="comment-form"> 
     Hello, I am a comment form. 
     </div> 
    ); 
    } 
}); 

var CommentBox = React.createClass({ 
    render: function() { 
    return (
     <div className="comment-box"> 
     <h1>Comments</h1> 
     <CommentList comments={this.props.data.comments} /> 
     <CommentForm /> 
     </div> 
    ); 
    } 
}); 

// ========== This won't work =========== 
// React.render(
// <CommentBox url="./data/data.json" />, 
// document.getElementById('content') 
//); 

// =========== This works. =========== 
$.ajax({ 
    type: "GET", 
    url: "./data/data.json", 
    dataType: "json", 
}).done(function(res){ 
    React.render(
    <CommentBox data={res} />, 
    document.getElementById('content') 
); 
}); 

Jede Art von Hilfe geschätzt wird.

Danke.

Answer 1

Ein wenig weiter unten in diesem React Tutorial führen sie eine AJAX-Anfrage in der componentDidMount-Eigenschaft der CommentBox React-Klasse durch.

Sie müssen in Ihrer CommentBox-Klasse eine AJAX-GET-Anforderung für die gewünschten Daten in der componentDidMount-Funktion erstellen.

Answer 2

Die React docs empfehlen, eine GET Anfrage in componentDidMount() durchzuführen und die Daten im Status zu speichern.

Zuerst initialisiert die Datenvariablen:

getInitialState: function() { 
    return { 
    dataVar1: '' 
    }; 
} 

dann die Daten holen $.get() Verwendung:

componentDidMount: function() { 
    $.get('URL-TO-FETCH-DATA-FROM', function(result) { 
    if (this.isMounted()) { 
     this.setState({ 
     dataVar1: result 
     }); 
    } 
    }.bind(this)); 
} 

wo $.get ist die jQuery AJAX Kurzschrift Funktion. In render() können dann die Daten angezeigt werden:

render: function() { 
    return (
    <div> 
     {this.state.dataVar1} 
    </div> 
); 
}