setState nicht funktioniert

Question

class Assets extends React.Component{ 

    constructor() { 
    super(); 
    this.state = { 
      assets: [], 
      secondsElapsed: 0 
     }; 
    } 

tick() { 
    if(start === true){ 

     fetch('/api/user/all/?name='+name, {credentials: 'include', method: 'get'}).then(function(data){ 
     return data.json(); 
     }).then(json => { 
     this.setState({ 
      assets: json 
      }); 
     }); 
     } 
    } 
    } 

ReactDOM.render(<Assets />, document.getElementById('alerts')); 

Dieser Code wirft diesen Fehler bei der Ausführung:

Uncaught (in promise) TypeError: Cannot read property 'setState' of null 
    at eval (eval at <anonymous> (bundleAlerts.js:3430), <anonymous>:265:15) 
    at <anonymous> 

Der Code wird von webpack halten worden, ob das einen Unterschied macht. Ich habe die ReactCreate-Klasse zuvor verwendet und es funktionierte gut, aber ich habe es geändert, um einen weiteren Fehler zu beheben.

Danke, Ed.

Answer 1

Binden Sie Ihre tick Funktion an Ihre Komponente. :) Es war zur Zeit an die Funktion gebunden und nicht an die Klassenkomponente, daher konnte es nicht auf 'dieses' zugreifen, was bedeutet, dass es nicht auf deine Requisiten oder deinen Status zugreifen kann. Sie können entweder das folgende Beispiel verwenden, den Autobind Decorator (ES7) oder die Eigenschaften der Klasse transformieren "tick =() => {...}".

class Assets extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { 
 
     assets: [], 
 
     secondsElapsed: 0 
 
    }; 
 
    this.tick = this.tick.bind(this); 
 
    } 
 
    tick() { 
 
    if (start === true) { 
 
     fetch("/api/user/all/?name=" + name, { 
 
     credentials: "include", 
 
     method: "get" 
 
     }) 
 
     .then(data => { 
 
      return data.json(); 
 
     }) 
 
     .then(json => { 
 
      this.setState({ 
 
      assets: json 
 
      }); 
 
     }); 
 
    } 
 
    } 
 
    // ...rest of component 
 
} 
 

 
ReactDOM.render(<Assets />, document.getElementById("alerts"));