antd的table進(jìn)行列篩選時(shí)，更新dataSource，為什么table顯示暫無(wú)數(shù)據(jù)？

everfly 發(fā)布于2019-08-23 17:05 / 2581人閱讀

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

我想當(dāng)然地認(rèn)為只要dataSource改變，那么

組件就會(huì)重新渲染，
但是有一種特殊情況例外：
在onFilter()中不寫篩選條件，在調(diào)用filterDropdown 進(jìn)行列篩選的時(shí)候，通過(guò)handleSearch改變/保存dataSource的狀態(tài)，此時(shí)

重新渲染，但是拿的不是dataSource={xxx}，而是拿的filterDropdown中的onFilter()中的dataSource，而onFilter中是沒(méi)有寫代碼的，所以返回暫無(wú)數(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出來(lái)，dataSource更改了，但是table顯示暫無(wú)數(shù)據(jù)。

示例代碼：

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

getColumnSearchProps = (dataIndex) => ({
    filterDropdown: ({
      setSelectedKeys, selectedKeys, confirm, clearFilters,
    }) => (
      
         setSelectedKeys(e.target.value ? [e.target.value] : [])}
          onPressEnter={() => this.handleSearch(selectedKeys, confirm)}
        />
        
      
    ),
    //篩選條件，沒(méi)有寫代碼，所以沒(méi)有數(shù)據(jù)返回，所以是暫無(wú)數(shù)據(jù)
    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 || [];
    // 優(yōu)化本地排序
   //就是這行代碼，通過(guò)slice，另開(kāi)內(nèi)存來(lá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;
  }

onFilter()的源碼地址：
https://github.com/ant-design/ant-design/blob/d922c377cba03bef39ddb7d271fce3f67c353be9/components/table/Table.tsx

（完）