私はajaxリクエストを作成しています。私のcomponentWillMountの反応コンポーネントの機能です。私は状態変数を持っています。私はこの変数の状態をajax呼び出しの応答として設定しました。componentWillMountのsetStateがcomponentWillMountに反映されない
this.setState({state_variable: response})
私のcomponentDidMount関数では、console.logにstate_variableの値を設定しようとしています。理想的には私はstate_variableの値を上記の応答として設定する必要があります。しかし、コンソールでは、値がstate_variableの初期値である空の配列として表示されています。
なぜcomponentDidMountが設定した値を取得できるのですか？何が間違っているのですか
componentDidMount()が実行されるまでにAJAXコールが完了すると思いますか？ componentWillMount()は、最初のrender()の直前で実行します。一方、componentDidMount()は、の後に、の最初のrender()の直後に実行されます。したがって、AJAX呼び出しがライフサイクルの実行にかかる時間内に状態を完了して更新するのに十分な時間はありません。
https://reactjs.org/docs/react-component.html#the-component-lifecycle
あなたのAJAX呼び出しは通常componentDidMount、ないcomponentWillMountに住んでいます。その理由は、アンマウントされたコンポーネントで呼び出しをしたくないということです。コンポーネントがマウントされる前にデータが返されないという前提があります。
私はすべて正常に動作していると確信していますが、おそらくcomponentWillMount ajax呼び出しが返される前にロギングしているだけです。代わりにそれを行うの、ような何か：
$.ajax({
// call parameters go here
}).then(function(response) {
this.setState({ state_variable: response });
})
now do your logging inside of render instead:
render() {
console.log(this.state.state_variable)
// normal render jsx here
}
SETSTATEコールが完了したときにあなたがして良いのログを取得する必要がありますので、再実行しますレンダリング。
私はcomponentWillMountの後に実行するcomponentDidMountでログアウトしています。それはログに記録されるべきでしょうか？ – ArbitB
必ずしも非同期であるため、componentDidMountはAjax呼び出しを待つことはありません。 – stevelacerda7
ComponentWillMountは、サーバレンダリングされたreactのcomponentDidMountと同等のライフサイクルメソッドとして使用するためのものです。それは最初に終わるガーデニングではありません。反応スタイルは、非同期呼び出しから読み込みプロパティを設定し、要求が完了するまで読み込みUIをレンダリングすることです。
反応成分全体を表示することができます – jfarn23