👀 Views: 29 💬 Answers: 1 📅 Created: 2025-06-14

react antd pagination JavaScript

I'm updating my dependencies and I'm working on a React application using Ant Design's Table component (v4.16.13) and I’m facing an issue with pagination when the data source updates. I’ve correctly set up the `pagination` prop, but when I update the data, the pagination doesn’t seem to reset or reflect the new data correctly. Here’s a snippet of what I have: ```jsx import React, { useState } from 'react'; import { Table, Button } from 'antd'; const MyTable = () => { const [data, setData] = useState([/* initial data */]); const [currentPage, setCurrentPage] = useState(1); const updateData = () => { setData([/* new data */]); setCurrentPage(1); // I thought this would reset the pagination }; const handleTableChange = (pagination) => { setCurrentPage(pagination.current); }; return ( <div> <Button onClick={updateData}>Update Data</Button> <Table dataSource={data} pagination={{ current: currentPage, pageSize: 10 }} onChange={handleTableChange} /> </div> ); }; export default MyTable; ``` Despite calling `setCurrentPage(1)` when I update the data, the pagination still displays the previous page state and doesn't reflect the new data. The `current` prop in the pagination seems to be ignored after the first render. I'm also seeing a warning in the console that says "Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa)" – could this be related? I’ve tried using the `key` prop to force a re-render but that didn't help either. What am I missing here? Thanks for your help in advance! Is there a simpler solution I'm overlooking? I'm using Javascript 3.11 in this project.