react antd Pagination函数组件怎么实现切换页面更新数据，代码展示

React Antd 的 Pagination 组件可以通过监听页码变化的事件来更新数据。

具体来说，你可以在 Pagination 组件的 `onChange` 回调函数中处理页码变化事件，当用户点击不同的页码时，就可以在该回调函数中调用更新数据的方法，并将新数据渲染到页面上。

以下是一个示例代码，展示如何使用 Pagination 组件实现切换页面更新数据：

import { useState, useEffect } from 'react';
import { Pagination } from 'antd';

function MyComponent() {
  const [currentPage, setCurrentPage] = useState(1);
  const [data, setData] = useState([]);

  // 模拟异步请求数据
  async function fetchData(page) {
    const res = await fetch(`https://example.com/api/data?page=${page}`);
    const json = await res.json();
    setData(json.data);
  }

  // 初始化时获取第一页数据
  useEffect(() => {
    fetchData(1);
  }, []);

  // 监听页码变化事件，更新数据
  function handlePageChange(page) {
    setCurrentPage(page);
    fetchData(page);
  }

  return (
    <div>
      {/* 渲染数据 */}
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}

      {/* 渲染 Pagination 组件 */}
      <Pagination current={currentPage} total={100} onChange={handlePageChange} />
    </div>
  );
}

在这个示例中，我们使用 `useState` 钩子来管理当前页码和数据状态。`useEffect` 钩子在组件挂载时获取第一页数据。`handlePageChange` 函数用于处理页码变化事件，并在变化时调用 `fetchData` 方法来获取新的数据。最后，我们在组件中渲染数据和 Pagination 组件，并将 `current` 属性设置为当前页码，`total` 属性设置为数据的总数。