すべての状態変更時にサービスコールをトリガーする関数を呼び出します。

Question

データをフィルタリングするチェックボックスのグループがあります。最初のデータがレンダリングされた後、私はチャートを扱っているので、私はUXを動的にしたいと思っています。したがって、私の反応コンポーネントのすべての状態変更に対して、私はサービスをトリガする関数を呼び出す必要があります。

handleChange = (query) => { 
    if(this.state.initialSearchTriggered) { 
    this.setState({query}) 
    this.triggerReportsService() 
    } 
} 

は、今の問題は、反応は、状態を更新するために時間を要しており、 triggerReportsServiceは、サービスを呼び出すために this.state.queryを使用しています。したがって、サービスクエリパラメータには最新のフィルタがありません。これを行うより良い方法はありますか？私は componentDidUpdate()メソッドを追加しようとしていましたが、サービスコールは複数回呼び出されていました。

componentDidUpdate() { 
    this.state.initialSearchTriggered ? this.triggerReportsService() : null; 
} 

ありがとう助けてください！

Answer 1

setState関数にコールバックを追加します。状態の更新が完了すると、コールバックが起動します。

handleChange = (query) => { 
    if(this.state.initialSearchTriggered) { 
    this.setState({query}, this.triggerReportsService) 
    } 
}