ReactJS non recupera i dati dal server quando si utilizza l'attributo 'url'

Question

Sono un principiante di ReactJS e sto appena iniziando con the example code on React's official site. Quando sto provando il codice nella sezione 'Fetching from the server', non riesco a farlo funzionare.

Ho provato sia il percorso relativo

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

e percorso assoluto

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

Ma nessuno di loro ha funzionare correttamente. Quando ho estratto il pannello Rete nello strumento di sviluppo di Chrome, ho visto che la pagina non inviava nemmeno la richiesta di data.json. Quindi ho ricevuto un errore di Cannot read property 'comments' of undefined. più

codice:

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

sarà apprezzato Qualsiasi tipo di aiuto.

Grazie.

Answer 1

Un po 'più in basso nella pagina di React Tutorial, eseguono una richiesta AJAX nella proprietà componentDidMount della classe CommentBox React.

È necessario effettuare una richiesta AJAX GET per i dati desiderati nella funzione componentDidMount nella classe CommentBox.

Answer 2

Il React docs consiglia di eseguire una richiesta GET in componentDidMount() e di memorizzare i dati in stato.

Prima, inizializzare le variabili di dati:

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

Poi recuperare i dati utilizzando $.get():

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

dove $.get è la funzione di scorciatoia jQuery AJAX. In render() i dati possono quindi essere visualizzati:

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