在 React 中加载更多按钮

Question

我自己找不到解决问题的办法。我发现这个很好的教程解决了我的问题：https://dev.to/narendersaini32/how-to-create-load-more-logic-in-react-474m 但是因为我已经用地图得到了我的日期，所以它对我不起作用！基本上，我想做一个像 link 中的加载更多按钮如何与我的解决方案结合，请任何建议谢谢！

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" />
          &nbsp; 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;
`;

Answer 1

您可以在本地对数据进行分页

第 1 步：

首先创建一个本地索引变量来跟踪加载更多按钮被点击的次数。还添加了一个页面大小和另一个状态变量来保存可见数据。


const PAGE_SIZE = 10 ;  // or whatever you like

const [index , setIndex] = useState (0)

const [visibleData , setVisibleData] = useState ([])

第 2 步：

然后在加载更多按钮中添加 onClick 处理程序来处理索引 increase/decrease 的

<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>

在 React 中加载更多按钮

Load more button in React

load

reactjs

第 1 步：

第 2 步：

第 3 步：

第 4 步：