Warum bekomme ich "this.state is null" in Reactjs?

Question

Ich bin neu zu Reacjs, ich besuchte mehrere Fragen mit einem ähnlichen Titel, aber keiner half mir.

Warum ändert dieser Code meinen Status nicht?

componentWillMount() 
{ 
    /** I am using superagent to fetch some data but it doesn't matter */ 

    var url = "http://www.omdbapi.com/?s=star&apikey=mykey"; 
    Request.get(url).then((response) => { 

    this.setState({ messages: response.body.Search}); 


    }); 
    } 

Meine render Methode

render() { 

     return (

       <div>  
    <ListaMensagens messages={this.state.messages} /> this.state is null here. 
       </div> 
      ... 

Wie kann ich meinen Zustand mit den abgerufenen Daten ändern und es zu einem Kind Komponente zu übergeben?

Answer 1

Im Allgemeinen Sie setState in componentWillMount ohne in Schwierigkeiten zu geraten können, aber ...

in Ihrem Fall, dass Sie den Zustand nach der Antwort des Antrags setzen, die Probleme verursacht.

Drei Lösungen für Ihr Problem:

1: den Konstruktor Verwenden Sie den Zustand zu initialisieren.

constructor(props){ 
    super(props); 

    this.state = { 
     messages: [] 
    }; 
} 

2: Feuer setState in componentWillMount ohne für jedes Versprechen zu warten

componentWillMount() { 
    this.setState({ 
     messages: [] 
    }); 
    request(...); 
} 

3: In der Funktionsprüfung machen, wenn der Staat

render(){ 
    <div> 
     { this.state && this.state.messages && <ListMensagens ... /> } 
    </div> 
}