Reaktionsstatus undefiniert nach setState?

Question

Ich habe einen Handler, der bei Änderung im Eingabefeld ausgelöst wird. Wie auch immer, wenn ich den Status auf der Konsole protokolliere resData ist 'undefiniert'? Das ist unmöglich, da console.log (body) Ergebnisse liefert.

handlePersonNameChange(event) { 
var resData 
request('https://swapi.co/api/people/?search='+event.target.value, function (error,response,body) { 
    console.log(body) 
    resData = body 
}) 
this.setState({personData: resData}); 
console.log(this.state) 
} 

Answer 1

Sie müssen setState innerhalb der Anfrage Rückruf, zum Beispiel:

request('https://swapi.co/api/people/?search='+event.target.value, function (error,response,body) { 
    console.log(body) 
    resData = body 
    this.setState({personData: resData}); 
}) 

weil Ihre Anfrage wurde nicht resovled wenn Sie setState in Ihrem Beispiel zu tun.

Answer 2

Ein Anforderungsaufruf ist asynchrone, Sie sollten die this.setState in den Antworttext einfügen.

Auch this.setState ist asynchrone, um das Ergebnis zu sehen, sollten Sie die Callback-Funktion verwenden. Diese Funktion wird aufgerufen, nachdem der neue Status festgelegt wurde.

handlePersonNameChange(event) { 
    var resData 
    request('https://swapi.co/api/people/?search='+event.target.value, 
    function (error,response,body) { 
    console.log(body) 
    resData = body 
    this.setState({personData: resData}, function() { 
     console.log(this.state) 
    }) 
    }) 
} 

Mehr Infos über this.setState() können here

Answer 3

this.setState({ state : "new1" }) 

Diese Methode ist nicht synchron zu finden ist so, wenn Sie den Zustand protokollieren es noch nicht aktualisiert wird.

Sie sollten es in der Lebenszyklusmethode componentWillUpdate protokollieren.