ReactJS und AJAX Uncaught TypeError: Kann Eigenschaft 'bugs' von Undefined nicht lesen

Question

Ich mache AJAX-Anfrage innerhalb einer React-Funktion, während Verweise auf den Status in der React-Klasse. Ich erhalte jedoch einen TypeError, bei dem die Referenz auf den Status nicht definiert ist, wenn ich die AJAX-Anfrage eintrage. .

Hier ist mein Code-Schnipsel, I "m nicht sicher, wie hier verfahren Wo verliere ich Zusammenhang

class BugList extends React.Component { 
    constructor() { 
     super(); 
     this.state = { 
      bugs: [], 
     }; 
    } 
    addBug(bug) { 
     $.ajax({ 
      type: 'POST', url: '/api/bugs', contentType: 'application/json', data:JSON.stringify(bug), 
      success: function(data) { 
       var bug = data; 

       var bugsModified = this.state.bugs.concat(bug); 
       this.setState({bugs: bugsModified}); 
      }.bind(this), 
      error: function(xhr, status, err) { 
       console.log("error adding bug: ", err); 
      } 
     }); 
    } 
    componentDidMount() { 
     $.ajax('/api/bugs').done(function(data) { 
      this.setState({bugs: data}) 
     }.bind(this)); 
    } 
    render() { 
     return(
      <div> 
       <h1>Bug Tracker</h1> 
       <BugFilter /> 
       <hr /> 
       <BugTable bugs={this.state.bugs}/> 
       <hr /> 
       <BugAdd addBug={this.addBug}/> 
      </div> 
     ); 
    } 
} 

Die problematische Zeile in Frage:

var bugsModified = this.state.bugs.concat(bug); 

Das Fehlerprotokoll:

Uncaught TypeError: Cannot read property 'bugs' of undefined 

Answer 1

Sie müssen bind die addBug method, verwenden Sie diese:

<BugAdd addBug={this.addBug.bind(this)}/> 

Sie eine Methode aus Mutterkomponente Kind Komponente vorbei, bind dass method in übergeordnete Komponente, wie folgt aus:

<BugAdd addBug={this.addBug.bind(this)}/> 

oder Sie können die binding im constructor auch definieren, wie folgt aus:

constructor() { 
    super(); 
    this.state = { 
     bugs: [], 
    }; 
    this.addBug = this.addBug.bind(this); 
} 

und direkt verwenden:

<BugAdd addBug={this.addBug}/> 

Answer 2

es ist ein Umfang Problem, versuchen ..

addBug(bug) { 
     ***var that = this;*** 
     $.ajax({ 
      type: 'POST', url: '/api/bugs', contentType: 'application/json', data:JSON.stringify(bug), 
      success: function(data) { 
       var bug = data; 

       var bugsModified = ***that.state.bugs.concat(bug)***; 
       this.setState({bugs: bugsModified}); 
      }.bind(this), 
      error: function(xhr, status, err) { 
       console.log("error adding bug: ", err); 
      } 
     }); 
    } 

oder auch

constructor() { 
     super(); 
     this.state = { 
      bugs: [], 
     }; 
    this.addbugs = this.addbugs.bind(this); 
    } 

versuchen können, und den Rest zu halten, wie es

Answer 3

war Obwohl Sie die Ajax-gebunden haben Erfolgsfunktion Sie haben vergessen, die addBug Funktion zu binden

Sie können von Arro Gebrauch machen w Funktion, um das zu tun, wie

class BugList extends React.Component { 
    constructor() { 
     super(); 
     this.state = { 
      bugs: [], 
     }; 
    } 
    addBug(bug) { 
     $.ajax({ 
      type: 'POST', url: '/api/bugs', contentType: 'application/json', data:JSON.stringify(bug), 
      success: function(data) { 
       var bug = data; 

       var bugsModified = this.state.bugs.concat(bug); 
       this.setState({bugs: bugsModified}); 
      }.bind(this), 
      error: function(xhr, status, err) { 
       console.log("error adding bug: ", err); 
      } 
     }); 
    } 
    componentDidMount() { 
     $.ajax('/api/bugs').done(function(data) { 
      this.setState({bugs: data}) 
     }.bind(this)); 
    } 
    render() { 
     return(
      <div> 
       <h1>Bug Tracker</h1> 
       <BugFilter /> 
       <hr /> 
       <BugTable bugs={this.state.bugs}/> 
       <hr /> 
       <BugAdd addBug={(data) => this.addBug(data)}/> 
      </div> 
     ); 
    } 
}