Acces this.state Variablen in React

Question

Ich habe den folgenden Code in reagieren:

getInitialState: function() { 
    var state= { 
     data: {} 
    }; 

    fetch(this.props.dataurl) 
     .then(function(response) { 
      return response.json(); 
     }) 
     .then(function(result) { 
      this.setState({data:result}); 
     }.bind(this)); 
    return this.state; 

}, 
componentDidMount: function() { 
    console.log(this); 
    console.log(this.state); 
} 

So in der getInitialState Funktion initialisieren ich die Zustandsvariablen Daten mit den Ergebnissen aus holen und dann möchte ich die Datenvariable für den Zugriff auf in die zweite Funktion componentDidMount.

Das Problem, das ich habe, ist, dass this.state das Datenobjekt leer zurückgibt, aber wenn ich versuche, this loggen ich bekomme die Datenvariable mit den Daten darin.

Warum habe ich dieses Verhalten und wie kann ich es lösen?

Answer 1

componentDidMount garantiert nicht, dass der asynchrone fetch abgeschlossen wurde.

Sie sollten componentDidUpdate definieren, die aufgerufen wird, wenn der Status geändert wurde, damit Sie mit diesen neuen Daten alles tun können.

componentDidUpdate(object prevProps, object prevState) 

Siehe React Lifecycle.