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

everfly 发布于2019-08-23 17:05 / 2317人阅读

摘要：我想当然地认为只要改变，那么组件就会重新渲染，但是有一种特殊情况例外在中不写筛选条件，在调用进行列筛选的时候，通过改变保存的状态，此时重新渲染，但是拿的不是，而是拿的中的中的，而中是没有写代码的，所以返回暂无数据。

我想当然地认为只要dataSource改变，那么

组件就会重新渲染，
但是有一种特殊情况例外：
在onFilter()中不写筛选条件，在调用filterDropdown 进行列筛选的时候，通过handleSearch改变/保存dataSource的状态，此时

重新渲染，但是拿的不是dataSource={xxx}，而是拿的filterDropdown中的onFilter()中的dataSource，而onFilter中是没有写代码的，所以返回暂无数据。

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

示例代码：

handleSearch=()=>{
  this.setState({dataSource:dataSourceB})
}

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

render{
  return(

) }

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

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

onFilter()的源码：

 getLocalData(state?: TableState | null, filter: boolean = true): Array {
    const currentState: TableState = 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

（完）

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103774.html

babel在提升前端效率的实践

摘要：配置涵盖了目前的业务场景的基本需求，但是可扩展性很低。最终决定采用的生态链来解决上述遇到的问题。在指定的路径下写入对应的文件。大纲遇到的问题场景及解决方案对比什么是babel？解决过程目前遗留的问题目前实现功能API 参考遇到的问题场景及解决方案对比我们目前采用的是antd + react(umi)的框架做业务开发。在业务开发过程中会有较多频繁出现并且相似度很高的场...

huayeluoliuhen 2019-08-26 13:51 评论0 收藏0
Babel 在提升前端效率的实践

摘要：经过一周左右的时间完成了基础组件的编写。配置涵盖了目前的业务场景的基本需求，但是可扩展性很低。最终决定采用的生态链来解决上述遇到的问题。在指定的路径下写入对应的文件。大纲遇到的问题场景及解决方案对比什么是babel？解决过程目前遗留的问题目前实现功能API 参考遇到的问题场景及解决方案对比我们目前采用的是antd + react(umi)的框架做业务开发。在业务开发过程中会...

chanthuang 2019-05-21 16:37 评论0 收藏0
常用列表页常见hook封装解析

　　我们今天来讲讲关于ahooks 源码，我们目标主要有以下几点：　　深入了解 React hooks。　　明白如何抽象自定义 hooks，且可以构建属于自己的 React hooks 工具库。　　小建议：培养阅读学习源码的习惯，工具库是一个对源码阅读不错的选择。　　列表页常见元素　　后台管理系统中常见典型列表页包括筛选表单项、Table表格、Pagination分页这三部分。　　针对使用 Ant...

3403771864 2022-11-05 16:18 评论0 收藏0
推荐学Java——数据表操作

摘要：出现在分组之后，其后可以接聚合函数。和表名删除表中数据有何区别前者是将表直接删除，然后重新创建表，表中无数据。后者是一条一条删除表中所有数据。在数据量较少的情况下，后者效率高反之，前者高。说明上节内容学习了数据库 MySQL 的安装、验证、数据库管理工具、数据库的基本操作命令，还没有学习的同学可以从主页去看上...

番茄西红柿 2021-11-26 11:11 评论0 收藏2637
从零开始的 React 组件开发之路 (一)：表格篇

摘要：下的表格狂想曲前言欢迎大家阅读从零开始的组件开发之路系列第一篇，表格篇。北京小李中的每一个元素是一列的配置，也是一个对象，至少应该包括如下几部分表头该列使用行中的哪个进行显示易用性与通用性的平衡易用性与通用性互相制衡，但并不是绝对矛盾。 React 下的表格狂想曲 0. 前言欢迎大家阅读「从零开始的 React 组件开发之路」系列第一篇，表格篇。本系列的特色是从需求分析、API 设...

DesGemini 2019-08-21 10:54 评论0 收藏0