reactjs - 在 React 中加载更多按钮
问题描述
我自己找不到解决问题的方法。我发现这个很好的教程解决了我的问题:https ://dev.to/narendersaini32/how-to-create-load-more-logic-in-react-474m但是因为我已经用地图得到了我的约会它不工作为了我!基本上,我想在链接中制作一个加载更多按钮,如何与我的解决方案结合,请任何建议谢谢!
import React from "react";
import styled from "styled-components";
import PortfolioCart from "./PortfolioCart";
const PortfolioList = ({ portfolio }) => {
if (portfolio.length === 0) {
return (
<NoResults>
<h3>
<i className="fas fa-search" />
There are no projects matching your parameters
</h3>
</NoResults>
);
}
return (
**<ListSection>
<div className="portfolio-list">
{portfolio.map((portfolios) => {
return <PortfolioCart key={portfolios.id} portfolios={portfolios} />;
})}
</div>
</ListSection>**
);
};
export default PortfolioList;
const ListSection = styled.div`
padding: 2rem 0;
.portfolio-list {
width: 80vw;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(270, 1fr));
grid-row-gap: 2rem;
grid-column-gap: 2rem;
}
@media screen and (min-width: 776px) {
.portfolio-list {
width: 90vw;
grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}
}
@media screen and (min-width: 992px) {
.portfolio-list {
width: 95vw;
max-width: 1170px;
}
}
`;
const NoResults = styled.div`
text-align: center;
text-transform: uppercase;
`;
解决方案
您可以在本地对数据进行分页
第1步 :
首先创建一个局部索引变量来跟踪单击加载更多按钮的次数。还添加页面大小和另一个状态变量来保存可见数据。
const PAGE_SIZE = 10 ; // or whatever you like
const [index , setIndex] = useState (0)
const [visibleData , setVisibleData] = useState ([])
第2步:
然后在加载更多按钮中添加 onClick 处理程序来处理索引的增加/减少
<button onClick={ () => setIndex (index+1 )}> Load More </button>
第 3 步:
然后当索引更改时添加更多数据
useEffect(() => {
const numberOfItems = PAGE_SIZE * ( index +1 );
const newArray = [];
for(let i= 0 ;i< portfolio.length ; i++ ){
if(i < numberOfItems)
newArray.push(portfolio[i])
}
setVisibleData(newArray);
} , [index])
第4步:
现在只渲染可见数据
<div className="portfolio-list">
{visibleData.map((portfolios) => {
return <PortfolioCart key={portfolios.id} portfolios={portfolios} />;
})}
</div>
推荐阅读
- visual-studio - 如何将 Xamarin 表单添加到 F# Xamarin Android 项目?
- c# - 如何在静态方法中使用会话变量?
- java - 从java中的字符串中提取多个日期(dd-MMM-yyyy格式)
- sql - 有什么方法可以了解我拥有哪些数据库权限?
- c# - 成功发布数据时无法在 jquery 中返回成功消息
- javascript - 如何在Javascript中对某些特定值而不是未定义使用后备?
- python - 如何比较python中列表列表中的项目
- r - 克服错误:rstan::sampling()中的初始化失败
- maven - 所有 SoapUI 测试都没有从 Maven 构建中执行
- java - 使用 Fragments 时如何防止“IllegalStateException”