前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >antd的table进行列筛选时,更新dataSource,为什么table显示暂无数据?

antd的table进行列筛选时,更新dataSource,为什么table显示暂无数据?

作者头像
进击的小进进
发布2022-03-28 14:54:13
3.2K0
发布2022-03-28 14:54:13
举报

我想当然地认为只要dataSource改变,那么<Table>组件就会重新渲染, 但是有一种特殊情况例外:onFilter()中不写筛选条件,在调用filterDropdown进行列筛选的时候,通过handleSearch改变/保存dataSource的状态,此时<Table>重新渲染,但是拿的不是dataSource={xxx},而是拿的filterDropdown中的onFilter()中的dataSource,而onFilter中是没有写代码的,所以返回暂无数据

PS: 解释下我不在onFilter()中写代码的原因,因为我已将dataSource保存到state中,所以需要setState去更改dataSource数据,但是onFilter()方法是在componentDidUpdate()周期调用的,所以setState会报错,所以我想到了在onClick中setState,但这样console.log出来,dataSource更改了,但是table显示暂无数据。

示例代码:

代码语言:javascript
复制
handleSearch=()=>{
  this.setState({dataSource:dataSourceB})
}

getColumnSearchProps = (dataIndex) => ({
    filterDropdown: ({
      setSelectedKeys, selectedKeys, confirm, clearFilters,
    }) => (
      <div>
        <Input
          value={selectedKeys[0]}
          onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
          onPressEnter={() => this.handleSearch(selectedKeys, confirm)}
        />
        <Button
          onClick={() => this.handleSearch(selectedKeys, confirm)}
        >
          Search
        </Button>
      </div>
    ),
    //筛选条件,没有写代码,所以没有数据返回,所以是暂无数据
    onFilter: (value, record) =>{  },
  })

render{
  return(
    <Table
      column={ [{...this.getColumnSearchProps('name')}}
      dataSource={dataSourceA}
    >
  ) 

}

示例代码地址: https://ant.design/components/table-cn/#components-table-demo-custom-filter-panel

列筛选逻辑的流程图如下:

onFilter()的源码:

代码语言:javascript
复制
 getLocalData(state?: TableState<T> | null, filter: boolean = true): Array<T> {
    const currentState: TableState<T> = state || this.state;
    const { dataSource } = this.props;
    let data = dataSource || [];
    // 优化本地排序
   //就是这行代码,通过slice,另开内存来保存dataSource
    data = data.slice(0);
    const sorterFn = this.getSorterFn(currentState);
    if (sorterFn) {
      data = this.recursiveSort(data, sorterFn);
    }
    // 筛选
    if (filter && currentState.filters) {
      Object.keys(currentState.filters).forEach(columnKey => {
        const col = this.findColumn(columnKey) as any;
        if (!col) {
          return;
        }
        const values = currentState.filters[columnKey] || [];
        if (values.length === 0) {
          return;
        }
        const onFilter = col.onFilter;
        data = onFilter
          ? data.filter(record => {
              return values.some(v => onFilter(v, record));
            })
          : data;
      });
    }
    return data;
  }

onFilter()的源码地址: https://github.com/ant-design/ant-design/blob/d922c377cba03bef39ddb7d271fce3f67c353be9/components/table/Table.tsx

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-04-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 webchen 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档