React kann den Status

Question

nicht festlegen Ich arbeite in React und versuche, ein ImageGrid mit Daten aus einer API zu füllen. Es gibt kein Problem mit den Daten bekommen, aber irgendwie kann ich nicht meinen Zustand gesetzt mit den responseData

ich die Daten zeigen kann, während ich die Antwort von dem API bekommen, aber ich kann meinen Zustand nicht gesetzt ...

componentWillMount() 
{ 
    this.state = { 
    content: '' 
    }; 

    this.loadContent(); 
} 

loadContent() 
{ 
    ApiService.getTweets(topic,numberOfElements,offset).then((responseData) => { 
    console.log("Data is here",responseData); //<---------- HERE 
    this.setState({ 
     content: responseData 
    }); 
    }) 
    console.log("Data is not here",this.state.content); //<---------- HERE 
} 

Hier

ich erhalte die Daten:

class ApiService {  

    static getTweets() {  

    return fetch("https://MyURL", { 
      method: 'get' 
      }) 
      .then((resp) => resp.json()) 
      .then(function(data) { 

      return data; 
      }).catch(function(error) { 
      console.log(error);// Error :(
      }); 
    } 
    } 
export default ApiService; 

Answer 1

Sie async Problem haben: beide fetch und setState sind async.

Answer 2

Sie möchten den Rückruf für den festgelegten Status verwenden, da der Status nicht sofort festgelegt wird.

loadContent() { 
    ApiService.getTweets(topic,numberOfElements,offset).then((responseData) => { 
    console.log("Data is here",responseData); //<---------- HERE 
    this.setState({ 
     content: responseData 
    },() => { 
     console.log("Data is here",this.state.content); //<---------- HERE 
    ); 
    }) 
} 

Answer 3

Sie müssen componentDidUpdate implementieren. Verlassen Sie sich nicht auf die Versprechen zu wissen, wann Ihre Komponente aktualisiert wurde. Reacts Lebenszyklus wird sich darüber sorgen, dass nach das System aktualisiert hat. Siehe unten.

Von diesem Punkt, den Sie leicht auch so etwas wie

componentDidUpdate(prevProps, prevState) { 
    if(prevState.content !== this.state.content) { 
    console.log('I have new content!', this.state.content); 
    } 
} 

tun können, können Sie if-Anweisung ignorieren, dass, wenn Sie in Ihrer Komponente einen setState() Ruf haben. So ist die kurze Version ist wie folgt:

componentDidUpdate(prevProps, prevState) { 
    console.log('I have new content!', this.state.content); 
}