reactjs 如何加载特定数量的数据通过点击一个按钮在React路由器?

jhkqcmku  于 2023-08-04  发布在  React
关注(0)|答案(2)|浏览(84)

我是react-router的新手。我在公共文件夹中设置了一些数据作为JSON数据,并使用slice函数显示了其中的一些数据,并希望在单击“查看更多”按钮时显示更多数据。我已经完成了第一部分,但无法找出如何做其余的按钮点击。请帮我弄明白。

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

const Home = () => {

    let jobs = useLoaderData();
    console.log(jobs);
    const jobsLoader = jobs;
    
    if (jobs.length > 6) {
        jobs = jobs.slice(0, 6)
    }
    
    const handleSeeMore = () => {
        console.log(jobsLoader);
    }

    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'>
                {
                    jobs.map(job => <Job
                        key={job.id}
                        job={job}
                    ></Job>)
                }
            </div>
            <button onClick={()=>handleSeeMore()} className='see-more'>See More</button>
            </div>
        </div>
    );
};

export default Home;

字符串

cld4siwp

cld4siwp1#

您需要添加一个useState来实现这一点。其思想是将作业数添加为状态,并在单击按钮时调用setState
你的组件看起来像这样

const Home = () => {
    const jobs = useLoaderData();
    const [jobCount, setJobCount] = useState(6);
    const displayJobs = jobs.slice(0, jobCount);
    const handleSeeMore = () => {
        setJobCount(12);
    }

    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'>
                {displayJobs.map(job => (
                    <Job
                        key={job.id}
                        job={job}
                    />)}
            </div>
            <button onClick={()=>handleSeeMore()} className='see-more'>See More</button>
            </div>
        </div>
    );
};

字符串
这是因为setJobCount导致组件的重新渲染。因此,在jobCount设置为12的情况下单击按钮后,组件将加载。

uyto3xhc

uyto3xhc2#

你需要使用状态来处理它,我已经改变了你的代码,让它可以按照你的要求工作:

const Home = () => { 

const [jobCount, setJobCount] = useState();
let jobs = useLoaderData();
const jobsLoader = jobs;

useEffect(() => {
 if (jobs.length > 6) {
   setJobCount(6);
 } else {
  setJobCount(jobs.length);
  }
}, [jobsLoader]);

const handleSeeMore = () => {
const nextJobs = jobCount + 6;
 if (nextJobs > jobs.length) {
   setJobCount(jobs.length);
 } else {
   setJobCount(nextJobs);
 }
};

 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">
      {jobs.slice(0,jobCount).map((job) => (
        <Job key={job.id} job={job}></Job>
      ))}
    </div>
   {jobs.length <jobCount && <button onClick={() => handleSeeMore()} 
    className="see-more">
      See More
    </button>}
  </div>
  </div>
  );
 };

export default Home;

字符串
状态jobCount将确定要显示的项目数。在初始useEffect中,我们设置数组的第一个结束点,如果有超过六个项目,则它将被设置为项目的数量(即长度)。另外,我在查看更多按钮上设置了一个条件,它只会在还有项目要显示时显示,否则它不会显示。
然后在我们的handleSeeMore函数中,我们检查添加的6个项目是否超过我们的总项目,如果是,那么我们将显示所有剩余的项目,否则我们将显示6个项目。

相关问题