setStateの後の状態は未定義ですか？

Question

私は、入力フィールドの変更に応じて起動するハンドラを持っています。しかし、コンソールに状態を記録するとresDataは 'undefined'になりますか？ console.log（body）は結果を返すので不可能です。

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

次の例のように、要求コールバック内setStateする必要があります。

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

あなたはあなたの例ではsetStateを行うときに、あなたの要求はresovledていないため。

Answer 2

リクエストコールはasynchroneです。this.setStateをレスポンスボディに入れる必要があります。

また、this.setStateはasynchroneです。結果を見るには、コールバック関数を使用する必要があります。このファンクションは、新しい状態が設定された後に呼び出されます。

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) 
    }) 
    }) 
} 

詳細情報を、約this.setState()here

Answer 3

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

この方法は、同期ではありません見つけることができますので、状態をログに記録されている場合、それはまだ更新されていません。

あなたはcomponentWillUpdateライフサイクルメソッドでログインする必要があります。