• The problem

Recalling my internship one year ago, THERE was a background management that required paging for queries and two tabs corresponding to different query conditions. Now WHEN I saw the code written at that time, I came back and planned to sort it out. See the previous code used a large number of ternary operators, resulting in the overall reading is not good, and then modify the bug is indeed inconvenient similar to the following picture, but slightly complicated, the following old code:

Axios ('/ API /demo', {method: 'GET', data: {accountType: 1, billType: jsons.data.roles.length === 1? 3 : 1, currentPage: 1, pageSize: 10, }, success: function (json) { setTableData(json.data.dataList) setPage(json.data.page) } })Copy the code
Function Request (accountType, billType, currentPage, pageSize, status) {axios('/ API /demo', {method: 'GET', data: { accountType: accountType, billType: billType, currentPage: currentPage, pageSize: pageSize, status: status }, success: function (json) { setPage(json.data.page) setTableData(json.data.dataList) } }) }Copy the code
/ / click when paging paging list method invocation request < Pagination showSizeChanger showQuickJumper pageSize = {Number (page. PageSize) | | 1} pageSizeOptions={['10', '20', '30', '40', '50', '100', '200']} total={page.totalCount} current={page.currentPage} showTotal={total => 'total ${total} line'} // OnChange ={changePageSize} onChange={currentBills === 'shopping bills'? changePageSize : changePageSizes} style={{ float: 'right', marginTop: '16px' }} />Copy the code
Function changePageSize(pages, pageSize) {// Request (1, 3, pages, pageSize); value) } function changePageSizes(pages, pageSize) { request(1, 1, pages, pageSize, values) }Copy the code

To tell you the truth, a large string of code above was copied and pasted at the same time when I couldn’t make fun of myself. At that time, I learned too little. There is no good solution but to write.

  • The solution

If you see the same code twice or more, you need to wrap it. You can wrap a table page query into a component and place it under different tabs. Then you can optimize the query page code and pass in different query conditions as parameters

Let [dataSource, setDataSource] = useState(null) let [pagination, setPagination] = useState({ 1, pageSize: 10, totalPage: 1}) const url = '/demo/ API 'const datas = {logisticsName, Const load = (datas,pagination, URL) => {var data = {}; Object.assign(data, pagination, datas); axios({ url, Data}). Then (res => {setPagination(res.page) setDataSource(res.datalist)})} textAlign:'center', marginTop: '16px' }} showQuickJumper showSizeChanger pageSize={pagination.pageSize} pageSizeOptions={['10', '20', '30', '40', '50', '100', '200']} current={pagination.currentPage} total={pagination.totalCount} showTotal={total => 'total ${total} onChange={(page, pageSize) => { pagination.currentPage = page; if (pagination.pageSize ! = pageSize) { pagination.pageSize = pageSize; pagination.currentPage = 1; } load( datas,pagination, url) }} />Copy the code