门户网站和社交网络的区别,广东深圳职业技术学校,二级网站的建设方案,网站编辑 教程我想当然地认为只要dataSource改变#xff0c;那么Table组件就会重新渲染#xff0c;但是有一种特殊情况例外#xff1a;在onFilter()中不写筛选条件#xff0c;在调用filterDropdown进行列筛选的时候#xff0c;通过handleSearch改变/保存dataSource的状态#…我想当然地认为只要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?: TableStateT | null, filter: boolean true): ArrayT { const currentState: TableStateT 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/… 完
