React Tutorial: TypeError: Impossibile leggere la proprietà 'oggetti di scena' di undefined

Question

Ho deciso di imparare React e ho iniziato con il tutorial ufficiale. Tutto è bene fino a arrivare a questo stato del mio codice:

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

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

var Comment = React.createClass({ 
    rawMarkup:() => { 
    var rawMarkup = marked(this.props.children.toString(), {sanitize: true}); 
    return {__html: rawMarkup}; 
    }, 

    render:() => { 
    return (
     <div className="comment"> 
     <h2 className="commentAuthor"> 
      {this.props.author} 
     </h2> // <--- [[[[[[ ERROR IS HERE ]]]]]] 
     <span dangerouslySetInnerHtml={this.rawMarkup} /> 
     </div> 
    ); 
    } 
}); 

var CommentList = React.createClass({ 
    render:() => { 
    return (
     <div className="commentList"> 
     <Comment author="Pete Hunt">This is one comment</Comment> 
     <Comment author="Jordan Walke">This is *another* comment yo</Comment> 
     </div> 
    ); 
    } 
}); 

ReactDOM.render(
    <CommentBox />, 
    document.getElementById('content') 
); 

Quando provo a farlo funzionare, ottengo il seguente errore nel devtools: "TypeError: Impossibile leggere proprietà 'oggetti di scena' di indefinito" e la debugger fa una pausa sulla linea segnata (vedi codice). Quando passo il mouse su "this" in {this.props.author} ottengo un'anteprima dell'oggetto che ha la proprietà "props" e tutto ...

Sono davvero nuovo per reagire, quindi è probabilmente qualcosa di stupido , ma chissà ...

Spero che voi ragazzi potete aiutare!

Cheers, H.

Answer 1

dichiarazione Utilizzare la funzione (render() {} o render: function {}) invece di funzione freccia render:() => {}

var Comment = React.createClass({ 
    rawMarkup() { 
    var rawMarkup = marked(this.props.children.toString(), {sanitize: true}); 
    return {__html: rawMarkup}; 
    }, 

    render() { 
    return (
     <div className="comment"> 
     <h2 className="commentAuthor"> 
      {this.props.author} 
     </h2> 
     <span dangerouslySetInnerHtml={this.rawMarkup} /> 
     </div> 
    ); 
    } 
}); 

Example

An arrow function expression has a shorter syntax compared to function expressions and lexically binds the this value (does not bind its own this, arguments, super, or new.target). Arrow functions are always anonymous.

Answer 2

Ho avuto lo stesso messaggio di errore "Impossibile leggi la proprietà 'oggetti di scena' di undefined ", ma da una causa diversa: quando viene chiamato da this all'interno di una funzione, javascript non può raggiungere la variabile perché this è in un ambito esterno. (Nota: io ero in ES5)

In questo caso, è sufficiente memorizzare this in un'altra variabile, prima la funzione (nel campo di applicazione del componente): var that = this;

allora si sarà in grado di chiama that.props dall'interno della funzione.

Spero che questo aiuti per le altre persone che hanno avuto quel messaggio di errore.

esempio dettagliato di seguito:

  render: function() { 
 
       var steps = []; 
 
       var that = this; // store the reference for later use 
 
       var count = 0; 
 
       this.props.steps.forEach(function(step){ 
 
        steps.push(<Step myFunction={function(){that.props.anotherFunction(count)}}/>); // here you are 
 
        count +=1; 
 
       }); 
 

 
       return(
 
        <div>{steps}</div> 
 
        </div> 
 
       ) 
 
      }