How to reset the Pagination's current page when pageSize changes in Ant Design?

In using Ant Design's pagination component, when pageSize (the number of items per page) changes, it is common to reset the current page to the first page to avoid inconsistencies in the user interface or data display errors. To achieve this, reset the pagination to the first page by updating the current state.

Here is a specific implementation example using the React framework and Ant Design's Pagination component:

jsx
import React, { useState } from 'react';
import { Pagination } from 'antd';

const App = () => {
  const [current, setCurrent] = useState(1);
  const [pageSize, setPageSize] = useState(10);

  const handlePageChange = (page, pageSize) => {
    // Update current page state on page change
    setCurrent(page);
  };

  const handlePageSizeChange = (current, size) => {
    // Update pageSize and reset to first page on items per page change
    setPageSize(size);
    setCurrent(1);  // Reset to first page
  };

  return (
    <div>
      <Pagination
        current={current}
        pageSize={pageSize}
        total={200} // Assume total data items are 200
        onChange={handlePageChange}
        onShowSizeChange={handlePageSizeChange}
      />
    </div>
  );
};

export default App;

In this example:

• We define current and pageSize states to control the current page number and the number of items per page.
• We use the onChange and onShowSizeChange event handlers of the Pagination component. onChange is triggered when the page number changes, while onShowSizeChange is triggered when the page size changes.
• In the handlePageSizeChange function, we update pageSize and set current to 1, so the view automatically jumps to the first page after changing the number of items per page.

This approach ensures consistency in the user interface and data accuracy, while enhancing the user experience.