2019.12.06 遇到了一个bug

bug 描述：在使用 antd 组合组件 Form + Table 时，选择相应的搜索条件后，点击“搜索”按钮，Table 会渲染相应的数据，且Table 表头也有自带的过滤功能（实际上是column的filters属性起的作用）；然后再点击“清除”按钮，所有的搜索条件和表头里filters过滤的条件都要被清除。

上述是 bug 解决后所要达到的期望，实际上 bug 的产生是因为点击“清除”按钮后，搜索栏的搜索条件被清空了，但是 Table 组件表头column里的过滤条件未清空

用一个 gif 图来描述该 bug 的诞生：

上述动图最后点击“清除”按钮后，虽然数据表格里的数据刷新了，但是表头-状态的 filters 并未还原。

 解决方法：

其实对于 react + antd 很熟练的开发者和善于利用组件的接口文档学习的开发者来说，这个问题很容易就解决了，因为在 antd 工具的官方文档中就有该问题的解决办法，只不过 antd 文档未给出具体的实例说明，这就需要开发者线下自学了。

解决问题的主要办法是 column API 的 filteredValue （https://2x.ant.design/components/table-cn/ ，antd2.0和3.0均可查阅）这个属性，官方文档的介绍是这样的：

使用实例（方法）： 以下代码只列出解决问题的必要部分

组件内部变量存储

state = {
  filteredInfo: null   // table表头里的筛选集合
}

表格组件状态变化后的处理方法 

 // 表格组件状态变化后的处理 
 tableChange = ({ current: pageNum, pageSize }, filters) => {
    this.setState({ filteredInfo: filters })
    // 获取表头的筛选状态值
    const status = filters.status 
    // 请求数据
    this.props.getList({
      pageNum,
      pageSize,
      status
    });
  }

一键清除（包含Form和Table）方法

  resetForm = (e) => {
    e.preventDefault();
    this.props.form.resetFields();
    // 清除时，同时也要清除表头里的筛选
    this.setState({ filteredInfo: null });
    // 因为全部清除，故无需传参数
    this.props.getList();
  }

react 里的 render() 方法

let { filteredInfo } = this.state;
filteredInfo = filteredInfo || {};
const columns = [
  { 
    title: '状态', 
    dataIndex: 'status',
    filters:  [
      { text: '生成中', value: '0' },
      { text: '待确认', value: '1' },
      { text: '已确认', value: '2' },
      ......
    ], 
    filteredValue: filteredInfo.status || null
    render: (text) => [
      '生成中', '待确认', '已确认', ......
    ][text]
  },
  { 
    title: '入账标志', 
    dataIndex: 'enterStatus',
    filters: [
      { text: '未入账', value: '0' },
      { text: '入账中', value: '1' },
      { text: '已入账', value: '2' }
    ], 
    filteredValue: filteredInfo.enterStatus || null,
    render: (text) => [
      '未入账', '入账中', '已入账'
    ][text]
  }
]
return (
  <div>
    <Form onSubmit={this.handleSubmit}>
      <Form.Item>
        <Button onClick={this.resetForm}> 清除 </Button>
        <Button type='primary' htmlType='submit'>搜索</Button>
      </Form.Item>
    </Form>
    <Table
      onChange={this.tableChange}
      columns={columns}
      dataSource={this.props.list}
      pagination={
        current: this.props.pageNum,
        pageSize: this.props.pageSize,
        total: this.props.total,
        showSizeChanger: true,
        showQuickJumper: true
      },
    />
  </div>
)

实质上，就是把 filteredValue 的值从有变为无的过程，这样就解决了这个bug...