调用一个函数，在每次状态更改时触发服务调用

Question

我有一组用于过滤数据的复选框。在渲染初始数据之后，当我处理图表时，我想让UX动态化。因此，对于我的react组件中的每个状态更改，我想调用一个触发服务的函数。

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