antd的table進行列篩選時，更新dataSource，為什么table顯示暫無數據？

everfly 發布于2019-08-23 17:05 / 2454人閱讀

摘要：我想當然地認為只要改變，那么組件就會重新渲染，但是有一種特殊情況例外在中不寫篩選條件，在調用進行列篩選的時候，通過改變保存的狀態，此時重新渲染，但是拿的不是，而是拿的中的中的，而中是沒有寫代碼的，所以返回暫無數據。

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

（完）

GPU云服務器云服務器 js獲取table 列數據 js分頁顯示table數據 js的table數據方向 js獲取table的數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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