如何在自定义早期分页时动态显示硬编码的页面链接

const express = require('express');
const app = express();
const PORT = 3000;

let data = Array.from({ length: 100 }, (_, i) => ({ id: i, name: `Item ${i}` }));

app.get('/items', (req, res) => {
  const page = parseInt(req.query.page) || 1;
  const limit = parseInt(req.query.limit) || 10;
  const startIndex = (page - 1) * limit;
  const endIndex = page * limit;

  const paginatedData = data.slice(startIndex, endIndex);
  res.json({
    items: paginatedData,
    totalPages: Math.ceil(data.length / limit),
    currentPage: page
  });
});

app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [items, setItems] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);

  useEffect(() => {
    fetchItems(currentPage);
  }, [currentPage]);

  const fetchItems = async (page) => {
    const response = await axios.get(`http://localhost:3000/items?page=${page}`);
    setItems(response.data.items);
    setTotalPages(response.data.totalPages);
  };

  return (
    <div>
      <ul>
        {items.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
      <div>
        {Array.from({ length: totalPages }, (_, i) => (
          <button key={i} onClick={() => setCurrentPage(i + 1)}>
            {i + 1}
          </button>
        ))}
      </div>
    </div>
  );
}

export default App;