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

85次阅读

共计 1940 个字符,预计需要花费 5 分钟才能阅读完成。

我想当然地认为只要 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 显示暂无数据。

示例代码:

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()的源码:

 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


(完)

正文完
 0