React项目Ag Grid服务端模式下清除过滤器后取旧状态值问题

我有一个设置了rowModelType = 'serverSide'的React项目，使用自定义过滤组件，还有一个用于清除过滤器的外部按钮。点击按钮时触发gridApi.setFilterModel(null)，随后组件调用setModel函数并执行this.setState({checkedFilters: []})，之后调用gridApi.getFilterModel()，再调用getModel()时发现this.state.checkedFilters仍为旧值[1,2]。

组件初始状态：

this.state = {
  checkedFilters: [1,2]
};

• React的setState是异步更新机制，你在调用this.setState({checkedFilters: []})后立刻读取this.state.checkedFilters，此时状态还没完成更新，所以拿到的还是旧值。
• 操作顺序也有问题：先清空了ag-Grid的过滤模型，再手动更新组件自身状态，但因为setState异步，后续getModel()里读取的this.state自然还是未更新的旧数据。

解决办法：

• 改用setState的回调函数，在状态确认更新完成后再执行后续逻辑：

this.setState({checkedFilters: []}, () => {
  // 这里再调用getModel()或gridApi相关方法，此时this.state.checkedFilters已更新为[]
  const currentModel = this.getModel();
  gridApi.getFilterModel();
});

• 让组件状态和ag-Grid的filterModel自动同步：通过监听ag-Grid的filterChanged事件，在表格过滤模型变化时，同步更新组件的checkedFilters状态，避免手动调用setState导致的不同步问题。

内容的提问来源于stack exchange，提问作者Ihar Pronka