我想當然地認為只要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}
????>
??)?

}
復制代碼

示例代碼地址：
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?||?[];
????//?優化本地排序
???//就是這行代碼，通過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()的源碼地址：
github.com/ant-design/…

---

（完）

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。