我是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;
字符串
2条答案
按热度按时间cld4siwp1#
您需要添加一个
useState
来实现这一点。其思想是将作业数添加为状态,并在单击按钮时调用setState
。你的组件看起来像这样
字符串
这是因为
setJobCount
导致组件的重新渲染。因此,在jobCount
设置为12
的情况下单击按钮后,组件将加载。uyto3xhc2#
你需要使用状态来处理它,我已经改变了你的代码,让它可以按照你的要求工作:
字符串
状态jobCount将确定要显示的项目数。在初始useEffect中,我们设置数组的第一个结束点,如果有超过六个项目,则它将被设置为项目的数量(即长度)。另外,我在查看更多按钮上设置了一个条件,它只会在还有项目要显示时显示,否则它不会显示。
然后在我们的handleSeeMore函数中,我们检查添加的6个项目是否超过我们的总项目,如果是,那么我们将显示所有剩余的项目,否则我们将显示6个项目。