关于typescript:基于antd-react-Hooks-搜索条件列表查询逻辑

一个常见的场景，页面顶部一堆搜寻条件，条件的开端是搜寻按钮和重置按钮，上面是一个列表。
设计一套没有问题的搜寻，重置逻辑。

第一，将这些搜寻条件和搜寻按钮，重置按钮封装成一个组件，因为重置也是搜寻，所以暴露出一个回调即可。SearchCallBack(...searchObject)。

因为 antd 的 Table 的 pagination 有几个属性

const [pagination,setPagination]=useState({
    current:1,
    pageSize:10,
    total:0,
    showTotal:(totalNum:Number) => ` 共 ${totalNum}条 `,
    pageSizeOptions:['10','20','50','100'];
    showSizeChanger:true,
    showQuickJumper:true,
})

页面中也有一个变量，用于寄存搜寻条件对象
const [searchObj,setSearchObj] =useState({...defaultSearchObj});
触发搜寻操作有三种状况
1，页面初始化实现，各种初始化条件均为空，默认查所有后果

useEffect(()=>{search();
},[])

2，页码发生变化, 或者一页展现条数发生变化

useEffect(()=>{search();
},[pagination.current,pagination.pageSize])

3，搜寻或者重置按钮触发

const SearchCallBack=(obj:any)=>{setSearchObj({...obj});
    if(pagination.current !== 1){setpation({...pagination,current:1,pageSize:10});
    }else{search(obj);
    }
}

搜寻办法接管一个可选参数

  const  search= (obj ?:any)=>{// 如果 obj 为真，取 obj 参数，不然就取 searchObj 参数}