React.js TypeError this.props ist undefined

Question

Ich habe angefangen zu lernen zu lernen reagieren und habe in ein Problem geraten, das ich nicht scheinen kann, herauszufinden. Wenn man durch ein Tutorial einen einfachen Kommentar machen Web-App Bearbeitung und ich erhalte diese Störung, wenn ich versuche, um einen Kommentar zu aktualisieren „Typeerror: _this3 ist nicht definiert“, speziell auf diesen Linien:

this.props.updateCommentText(this.refs.newText.value, this.props.index); 

und diese ein:

Hier

updateCommentText={()=>this.updateComment} 

ist die volle JavaScript-Code:

class Comment extends React.Component{ 

    constructor(){ 
    super(); 
    this.state = { 
     editing: false, 
    }; 

    this.edit = this.edit.bind(this); 
    this.save = this.save.bind(this); 
    } 

    edit(){ 
    this.setState({ 
     editing: true, 
    }); 
    } 

    save(){ 
    this.props.updateCommentText(this.refs.newText.value, this.props.index); 
    this.setState({ 
     editing: false, 
    }); 
    } 
    remove(){ 
    console.log('Removing comment'); 
    this.props.deleteFromBoard(this.props.index) 
    } 

    renderNormal(){ 
    return (
     <div className="commentContainer"> 
      <div className="commentText">{this.props.children}</div> 
      <button onClick={this.edit} className="button-primary">Edit</button> 
      <button onClick={this.remove} className="button-danger">Remove</button> 
     </div> 

    ); 
    } 

    renderForm(){ 
    return (
     <div className="commentContainer"> 
      <textarea ref="newText" defaultValue={this.props.children}></textarea> 
      <button onClick={this.save} className="button-success">Save</button> 
     </div> 

    ); 
    } 

    render(){ 
    if(this.state.editing){ 

     return this.renderForm(); 

    } else { 

     return this.renderNormal(); 

    } 
    } 
} 

class Board extends React.Component{ 

    constructor(){ 
    super(); 
    this.state = { 
     comments: [ 
     "Hiya", 
     "Awk well", 
     "Boo-urns" 
     ], 
    } 
    } 

    removeComment(i){ 
    console.log("Removing comment: " + i); 
    var arr = this.state.comments; 
    arr.splice(i, 1); 
    this.setState({ 
     comments: arr 
    }); 
    } 

    updateComment(newText, i){ 
    console.log("Updating comment: " + i); 
    var arr = this.state.comments; 
    arr[i] = newText; 
    this.setState({ 
     comments: arr, 
    }); 

    } 

    eachComment(text, i){ 
    return (
     <Comment key={i} index={i} 
     updateCommentText={()=>this.updateComment} 
     deleteFromBoard={()=>this.removeComment}> 

     {text} 

     </Comment> 
    ); 
    } 

    render(){ 
    return (
     <div className="board"> 
      { 
      this.state.comments.map(this.eachComment) 
      } 
     </div> 

    ); 
    } 
} 



// ======================================== 

ReactDOM.render(
    <Board />, 
    document.getElementById('container') 
); 

ich etwas gehe davon hat den Gültigkeitsbereich ging, aber ich bin nicht sicher, wo.

Answer 1

Dies ist ein Problem, aber es kann mehr :)

In diesem Code sein:

updateCommentText={()=>this.updateComment} 

Pfeil Funktion gibt eine Funktionsreferenz, aber nicht Aufruf die Funktion, wenn updateCommentText ist aufgerufen.

Versuchen Sie stattdessen:

updateCommentText={(value, index)=>this.updateComment(value, index)} 

BTW, Sie haben ein ähnliches Problem hier:

deleteFromBoard={()=>this.removeComment}