☰

React setStateコールバックを使用するタイミング 質問する

tag-icon • tag-icon reactjs callback setstate
React setStateコールバックを使用するタイミング 質問する

React コンポーネントの状態が変化すると、レンダリング メソッドが呼び出されます。したがって、状態の変化に対して、レンダリング メソッド本体でアクションを実行できます。setState コールバックの特定の使用例はありますか?

ベストアンサー1

はい、あります。ある意味setStateでは動作しますasynchronous。つまり、呼び出し後、setState変数this.stateはすぐには変更されません。したがって、状態変数に状態を設定した後すぐにアクションを実行し、結果を返したい場合は、コールバックが便利です。

以下の例を考えてみましょう

....
changeTitle: function changeTitle (event) {
  this.setState({ title: event.target.value });
  this.validateTitle();
},
validateTitle: function validateTitle () {
  if (this.state.title.length === 0) {
    this.setState({ titleError: "Title can't be blank" });
  }
},
....

上記のコードは、title検証が実行される前に変数が変更されていない可能性があるため、期待どおりに動作しない可能性があります。render()関数自体で検証を実行できるのではないかと疑問に思うかもしれませんが、changeTitle関数自体でこれを処理できれば、コードがより整理され、理解しやすくなるため、より優れたクリーンな方法になります。

この場合、コールバックが便利です

....
changeTitle: function changeTitle (event) {
  this.setState({ title: event.target.value }, function() {
    this.validateTitle();
  });

},
validateTitle: function validateTitle () {
  if (this.state.title.length === 0) {
    this.setState({ titleError: "Title can't be blank" });
  }
},
....

もう 1 つの例は、状態が変更されたときにアクションを実行したい場合ですdispatch。再レンダリングが発生するたびに呼び出されるため、コールバックではなくコールバックで実行するrender()必要があります。そのため、コールバックが必要になるシナリオが多数考えられます。

もう一つのケースはAPI Call

onState特定の状態の変更に基づいて API 呼び出しを行う必要がある場合、レンダリング メソッドでこれを行うと、レンダリングが変更されるたびに、または変更されたプロパティが渡されたために、API 呼び出しが呼び出されますChild Component。

setState callbackこの場合、更新された状態値をAPI呼び出しに渡すためにを使用します。

....
changeTitle: function (event) {
  this.setState({ title: event.target.value }, () => this.APICallFunction());
},
APICallFunction: function () {
  // Call API with the updated value
}
....

おすすめ記事