我想當(dāng)然地認(rèn)為只要dataSource改變，那么<Table>組件就會(huì)重新渲染，
但是有一種特殊情況例外：
在onFilter()中不寫篩選條件，在調(diào)用filterDropdown進(jìn)行列篩選的時(shí)候，通過handleSearch改變/保存dataSource的狀態(tài)，此時(shí)<Table>重新渲染，但是拿的不是dataSource={xxx}，而是拿的filterDropdown中的onFilter()中的dataSource，而onFilter中是沒有寫代碼的，所以返回暫無數(shù)據(jù)。

PS：
解釋下我不在onFilter()中寫代碼的原因，因?yàn)槲乙褜ataSource保存到state中，所以需要setState去更改dataSource數(shù)據(jù)，但是onFilter()方法是在componentDidUpdate()周期調(diào)用的，所以setState會(huì)報(bào)錯(cuò)，所以我想到了在onClick中setState，但這樣console.log出來，dataSource更改了，但是table顯示暫無數(shù)據(jù)。

示例代碼：

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>
????),
????//篩選條件，沒有寫代碼，所以沒有數(shù)據(jù)返回，所以是暫無數(shù)據(jù)
????onFilter:?(value,?record)?=>{??},
??})

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

}
復(fù)制代碼

示例代碼地址：
ant.design/components/…

列篩選邏輯的流程圖如下：

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?||?[];
????//?優(yōu)化本地排序
???//就是這行代碼，通過slice，另開內(nèi)存來保存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;
??}
復(fù)制代碼

onFilter()的源碼地址：
github.com/ant-design/…

---

（完）

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的antd的table进行列筛选时，更新dataSource，为什么table显示暂无数据？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。