ReactJS non riesce con un errore "Impossibile leggere la 'mappa' di proprietà di undefined`"

Question

Seguendo il tutorial react.js, ho un errore: Uncaught TypeError: Cannot read property 'map' of undefined.

Stavo seguendo the tutorial rigoroso ma bloccato a prelevamento dal server part. L'errore appare quando invio feedBox con dati url invece dei dati JSON codificati.

/** @jsx React.DOM */ 

var converter = new Showdown.converter(); 

var data = [ 
    { Author: "Daniel Lo Nigro", Text: "Hello ReactJS.NET World!" }, 
    { Author: "Pete Hunt", Text: "This is one comment" }, 
    { Author: "Jordan Walke", Text: "This is *another* comment" } 
]; 

var Comment = React.createClass({ 
    render: function() { 
    var rawMarkup = converter.makeHtml(this.props.children.toString()); 
    return (
     <div className="comment"> 
     <h2 className="commentAuthor"> 
      {this.props.author} 
     </h2> 
     <span dangerouslySetInnerHTML={{__html: rawMarkup}} /> 
     </div> 
    ); 
    } 
}); 

var CommentList = React.createClass({ 
    render: function() { 

    var commentNodes = this.props.data.map(function (comment) { 
     return <Comment author={comment.Author}>{comment.Text}</Comment>; 
    }); 

    return (
     <div className="commentList"> 
     {commentNodes} 
     </div> 
    ); 
    } 
}); 

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

var CommentBox = React.createClass({ 
    render: function() { 
    return (
     <div className="commentBox"> 
     <h1>Comments</h1> 

     <CommentList data={this.props.data} /> 

     <CommentForm /> 
     </div> 
    ); 
    } 
}); 

React.renderComponent(
    //<CommentBox data={data}/>,   //this works fine 
    <CommentBox url="/comments" />,   //Changing data feet to url produces an error 
    document.getElementById('content') 
); 

La richiesta al http://localhost:52581/comments sta lavorando e restituisce un dato JSON:

[{"Author":"Daniel Lo Nigro","Text":"Hello ReactJS.NET World!"},{"Author":"Pete Hunt","Text":"This is one comment"},{"Author":"Jordan Walke","Text":"This is *another* comment"}] 

Tutto il consiglio sarebbe di grande aiuto per me. Grazie.

Answer 1

In CommentBox, questa linea è il problema: <CommentList data={this.props.data} />

Non è più props.data dal momento che sta passando un URL in invece di un oggetto JS.

Il 2 ° funziona perché si utilizza lo stato e si imposta il valore predefinito su un array vuoto, su cui può ancora essere eseguita la mappa.

Answer 2

Questo funziona.

/** @jsx React.DOM */ 

var converter = new Showdown.converter(); 

var data = [ 
    { Author: "Daniel Lo Nigro 2", Text: "Hello ReactJS.NET World! 2" }, 
    { Author: "Pete Hunt 2", Text: "This is one comment 2" }, 
    { Author: "Jordan Walke 2", Text: "This is *another* comment 2" } 
]; 

var Comment = React.createClass({ 
    render: function() { 
    var rawMarkup = converter.makeHtml(this.props.children.toString()); 
    return (
     <div className="comment"> 
     <h2 className="commentAuthor"> 
      {this.props.author} 
     </h2> 
     <span dangerouslySetInnerHTML={{__html: rawMarkup}} /> 
     </div> 
    ); 
    } 
}); 

var CommentList = React.createClass({ 
    render: function() { 

    var commentNodes = this.props.data.map(function (comment) { 
     return <Comment author={comment.Author}>{comment.Text}</Comment>; 
    }); 

    return (
     <div className="commentList"> 
     {commentNodes} 
     </div> 
    ); 
    } 
}); 

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

var CommentBox = React.createClass({ 
    getInitialState: function() { 
    return {data: []}; 
    }, 
    componentWillMount: function() { 
    var xhr = new XMLHttpRequest(); 
    xhr.open('get', this.props.url, true); 
    xhr.onload = function() { 
     var data = JSON.parse(xhr.responseText); 
     this.setState({ data: data }); 
    }.bind(this); 
    xhr.send(); 
    }, 
    render: function() { 
    return (
     <div className="commentBox"> 
     <h1>Comments</h1> 

     <CommentList data={this.state.data} /> 

     <CommentForm /> 
     </div> 
    ); 
    } 
}); 

React.renderComponent(
    //<CommentBox data={data}/>, 
    <CommentBox url="/comments" />, 
    document.getElementById('content') 
); 

Answer 3

Questo errore può verificarsi anche perché si sta tentando di incorporare un componente di reazione come se fosse un risultato di rendering e non un componente stesso.

ad es.

var SampleClass = React.createClass({ 
... 
}); 

e poi si tenta e usarlo in questo modo

<div> 
    {SampleClass} 
</div> 

quando in realtà, si dovrebbe fare qualcosa di simile

<div> 
    <SampleClass/> 
</div> 

stavo ottenendo un errore simile, " Impossibile leggere la proprietà "ref" di undefined ", e questo era il problema.

Answer 4

Ho anche avuto questo problema esatto - il tutorial non è chiaro a questo punto, ma non penso che l'app in realtà dovrebbe caricare correttamente i dati a questo punto. Se continui a lavorare con il tutorial, hai creato una chiamata ajax usando this.props.url che carica i dati. Solo FYI per chiunque altro possa essere confuso, continua a premere, tutto va bene!