Ag-Grid外部过滤器在React中仅首次生效，后续失效求助

I see the issue here—you're using a plain variable (ageType) to track your filter selection instead of React state, which is why the filter only works the first time. In React, modifying a plain variable doesn't trigger a component re-render, so Ag-Grid never picks up the updated value for your external filter checks. Let me break down the fix step by step:

1. Convert ageType to React Component State #

If you're using a class component, add ageType to your component's state to ensure React tracks changes:

constructor(props) {
  super(props);
  this.state = {
    ageType: 'everyone' // Set your default filter value here
  };
}

2. Update externalFilterChanged to Use State #

Instead of directly assigning ageType = newValue, use setState to update the value. We'll call onFilterChanged() in the setState callback to ensure it runs after the state is actually updated:

externalFilterChanged = newValue => {
  this.setState({ ageType: newValue }, () => {
    this.gridApi.onFilterChanged();
  });
};

3. Update Filter Check Methods to Reference State #

Modify your isExternalFilterPresent and doesExternalFilterPass methods to use this.state.ageType instead of the plain variable:

isExternalFilterPresent = () => {
  return this.state.ageType !== 'everyone';
};

doesExternalFilterPass = node => {
  switch (this.state.ageType) {
    case 'below25':
      return node.data.age < 25;
    case 'between25and50':
      return node.data.age >= 25 && node.data.age <= 50;
    case 'above50':
      return node.data.age > 50;
    case 'dateAfter2008':
      return asDate(node.data.date) > new Date(2008, 1, 1);
    default:
      return true;
  }
};

4. Verify Grid Configuration #

Make sure you're properly storing the grid API when the grid loads, and that your grid options reference the filter methods:

onGridReady = params => {
  this.gridApi = params.api;
  this.gridColumnApi = params.columnApi;
};

// In your AgGridReact component JSX
<AgGridReact
  onGridReady={this.onGridReady}
  gridOptions={{
    isExternalFilterPresent: this.isExternalFilterPresent,
    doesExternalFilterPass: this.doesExternalFilterPass,
    // Add your other grid options here (column definitions, etc.)
  }}
/>

Why This Fixes the Problem #

When you update React state with setState, the component re-renders, and Ag-Grid will use the latest ageType value when you trigger onFilterChanged(). This ensures every filter selection change is properly detected and applied to your grid data.

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