在NextJS+TypeScript中实现点击加载指定数量卡片的分页按钮

1. 定义数据类型 #

先给模拟数据加上TypeScript类型，替换any保证类型安全：

// 定义卡片数据的类型结构
type EventCardItem = {
  new: boolean;
  title: string;
  body: string;
};

2. 实现加载逻辑 #

通过useState控制显示数量，结合数据截取完成分页式加载：

import { useState } from 'react';
import CardGrid from './CardGrid';
import FutureEventCard from './FutureEventCard';
import Button from './Button';

// 完整模拟数据数组
const allEventItems: EventCardItem[] = [
  {
    new: true,
    title: 'UI UX global summit 23',
    body: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy ipsum dolor sit amet, consetetur sadipscing elitr commodo ligula eget...'
  },
  // 其余模拟数据项
];

// 每次点击加载的卡片数量，可自定义
const LOAD_COUNT = 3;

export default function EventPage() {
  // 初始显示LOAD_COUNT数量的卡片
  const [displayCount, setDisplayCount] = useState(LOAD_COUNT);

  // 加载更多点击事件
  const handleLoadMore = () => {
    // 最多加载到全部数据，避免超出数组长度
    setDisplayCount(prev => Math.min(prev + LOAD_COUNT, allEventItems.length));
  };

  // 截取当前需要显示的数据
  const displayedItems = allEventItems.slice(0, displayCount);

  return (
    <div>
      <CardGrid 
        render={(item: EventCardItem) => (
          <FutureEventCard 
            newEvent={item.new} 
            title={item.title} 
            body={item.body} 
          />
        )} 
        items={displayedItems} 
      />
      {/* 还有未显示数据时才展示按钮 */}
      {displayCount < allEventItems.length && (
        <Button onClick={handleLoadMore}>
          {displayCount < allEventItems.length ? '加载更多' : '已显示全部'}
        </Button>
      )}
    </div>
  );
}

3. 关键逻辑说明 #

• 状态控制：displayCount记录当前显示的卡片数量，点击按钮时逐步增加，上限为总数据长度
• 数据截取：用slice(0, displayCount)从完整数据中提取需要渲染的部分，传给CardGrid的items属性
• 按钮显隐：仅当存在未显示数据时渲染按钮，避免无效交互
• 类型安全：通过EventCardItem类型约束数据，替代any，符合TypeScript规范

4. 可选：快速查看全部功能 #

如果需要直接显示所有卡片，修改按钮逻辑即可：

const handleViewAll = () => {
  setDisplayCount(allEventItems.length);
};

对应按钮文本改为View all，显示全部后可隐藏按钮或修改文本提示。

内容的提问来源于stack exchange，提问作者Chandur Dissanayake