Antd Table如何设置默认搜索筛选值实现首次渲染即生效

• 配套在线Demo
• 原始数据展示：
  
• 预期实现效果：

首次加载直接应用双列筛选规则：name 字段包含 'ji'，且 age 字段值等于32

问题原因 #

原有实现逻辑如下，无法生效：

componentDidMount() {
  this.setState({ searchText: "ji", searchedColumn: "name" })
  ...
  this.setState({ searchText: "32", searchedColumn: "age" })
}

核心原因是AntD Table的自定义筛选逻辑中，仅修改searchText这类控制输入框的状态不会触发筛选生效，必须调用筛选下拉实例提供的confirm方法才会正式提交筛选规则，而confirm实例无法在componentDidMount阶段直接获取调用，且连续同步setState会被React合并，导致筛选值被覆盖。

实现方案 #

方案1：使用列配置原生属性defaultFilteredValue（优先推荐） #

不需要编写额外生命周期逻辑，直接在列定义时给需要默认筛选的字段配置defaultFilteredValue即可，组件首次渲染会自动应用配置的筛选规则，无任何时序问题。
示例配置：

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    // 配置name列默认筛选值
    defaultFilteredValue: ['ji'],
    // 筛选值匹配规则
    onFilter: (value, record) => record.name.includes(value),
    // 原有自定义筛选下拉逻辑保持不变
    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm }) => {
      /* 自定义筛选表单内容 */
    }
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
    // 配置age列默认筛选值
    defaultFilteredValue: ['32'],
    // 筛选值匹配规则
    onFilter: (value, record) => record.age === Number(value),
    // 原有自定义筛选下拉逻辑保持不变
    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm }) => {
      /* 自定义筛选表单内容 */
    }
  }
]

方案2：Ref存储confirm实例，状态更新回调中依次触发确认 #

如果自定义筛选逻辑复杂，无法直接适配defaultFilteredValue规则，可以提前将各列的confirm方法存在ref中，在setState的更新回调中按顺序调用，保证状态更新完成后再提交筛选。
示例代码：

class DemoTable extends React.Component {
  constructor(props) {
    super(props);
    // 存储各列筛选confirm方法
    this.filterConfirm = {};
    this.state = {
      searchText: '',
      searchedColumn: ''
    }
  }

  componentDidMount() {
    // 先设置name列筛选值，更新完成后调用confirm
    this.setState(
      { searchText: 'ji', searchedColumn: 'name' },
      () => {
        this.filterConfirm.name?.();
        // 第一个筛选提交完成后，再设置age列筛选值
        this.setState(
          { searchText: '32', searchedColumn: 'age' },
          () => this.filterConfirm.age?.()
        )
      }
    )
  }

  render() {
    const columns = [
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
        filterDropdown: ({ confirm, /* 其余原有props */ }) => {
          // 挂载时存储name列的confirm方法
          this.filterConfirm.name = confirm;
          /* 原有自定义筛选表单内容 */
        }
      },
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
        filterDropdown: ({ confirm, /* 其余原有props */ }) => {
          // 挂载时存储age列的confirm方法
          this.filterConfirm.age = confirm;
          /* 原有自定义筛选表单内容 */
        }
      }
    ]

    return <Table columns={columns} dataSource={/* 你的数据源 */} />
  }
}

注意不要在同步执行完两次setState后再统一调用confirm，React的状态批处理机制会导致前一次设置的筛选值被覆盖。

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