如何在React Router中通过点击按钮加载指定数量的数据？

你当前的问题核心是没通过状态跟踪展示条目数量，直接对原始数据切片后无法触发页面动态更新。以下是具体修复方案：

核心思路 #

• 用useState管理当前展示的条目数，初始值设为6
• 保留完整的原始数据，避免直接修改源数据
• 点击按钮时更新状态，触发页面重新渲染以展示更多内容
• 可选：当无更多数据时自动隐藏“查看更多”按钮

修改后的完整代码 #

import React, { useState } from 'react';
import './Home.css'
import Banner from '../Banner/Banner';
import { useLoaderData } from 'react-router-dom';
import Job from '../Job/Job';

const Home = () => {
    // 获取完整的jobs数据源
    const allJobs = useLoaderData();
    // 用state跟踪当前要展示的条目数量，初始展示6条
    const [showCount, setShowCount] = useState(6);

    // 根据当前展示数量切片数据
    const displayedJobs = allJobs.slice(0, showCount);

    const handleSeeMore = () => {
        // 每次点击追加6条，用Math.min防止超过总数据长度
        setShowCount(prev => Math.min(prev + 6, allJobs.length));
    }

    return (
        <div className='home-container'>
            <Banner></Banner>
            <div className="jobs-container">
                <div className='featured-jobs-heading'>
                    <h2>Featured Jobs</h2>
                    <p>Explore thousands of job opportunities with all the information you need. Its your future</p>
                </div>
                <div className='job-container'>
                    {
                        displayedJobs.map(job => <Job
                            key={job.id}
                            job={job}
                        ></Job>)
                    }
                </div>
                {/* 仅当还有未展示数据时显示按钮 */}
                {showCount < allJobs.length && (
                    <button onClick={handleSeeMore} className='see-more'>See More</button>
                )}
            </div>
        </div>
    );
};

export default Home;

关键修改说明 #

1. 新增showCount状态变量，专门控制展示条目数，确保状态变化能触发组件重渲染
2. displayedJobs基于showCount动态切片，每次状态更新都会重新计算要展示的数据
3. handleSeeMore函数中用Math.min限制最大值，避免切片超出数据总长度
4. 给按钮添加条件渲染，数据全部展示后自动隐藏按钮，提升用户体验

内容的提问来源于stack exchange，提问作者Mostafa Ferdaous Nayeem