React Tutorial: TypeError: Nie można odczytać właściwości "rekwizytów" niezdefiniowanych

Question

Postanowiłem nauczyć się React i zacząłem od oficjalnego samouczka. Wszystko jest dobrze, dopóki nie dostać się do tego stanu mojego kodu:

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

Kiedy próbuję go uruchomić, pojawia się następujący błąd w DevTools: „TypeError: nie można odczytać własności«rekwizyty»undefined” i debugger zatrzymuje się na zaznaczonej linii (patrz kod). Kiedy najecham na "to" w {this.props.author} otrzymam podgląd obiektu, który ma właściwość "rekwizyty" i wszystko ...

Jestem naprawdę nowy, aby zareagować, więc jest to prawdopodobnie coś głupiego , ale kto wie ...

Mam nadzieję, że możesz pomóc!

Cheers, H.

Answer 1

deklaracja użycie funkcji (render() {} lub render: function {}) zamiast funkcji strzałki 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

miałem ten sam komunikat o błędzie „nie może odczytać właściwość "podpory" o niezdefiniowanym ", , ale z innej przyczyny: gdy wywoływana jest this z poziomu funkcji, javascript nie może osiągnąć zmiennej, ponieważ this znajduje się w zasięgu zewnętrznym. (Uwaga: Byłem w ES5)

W tym przypadku, po prostu przechowywać this w innej zmiennej, przed funkcji (w zakresie komponentu): var that = this;

Wtedy będziesz w stanie zadzwoń pod numer that.props z poziomu funkcji.

Mam nadzieję, że pomoże to innym osobom, które miały ten komunikat o błędzie.

szczegółowy przykład poniżej:

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