Как создать кнопку загрузки еще в Reactjs

Question

У меня есть карточки и модальные окна, мне нужно показать только 2 карточки на странице и иметь кнопку, чтобы показать остальные, я новичок в программировании и реагирую, я не знаю, что мне делать, вот что Теперь у меня есть

import React from "react"
import { Container } from "./_styles"
import { useTheme } from "@material-ui/core/styles"
import ImgMediaCard from "./../../../components/Cartao"
import AlertDialog from './../../../components/Modal'

export default function PortfolioSection(props) {
  let arrayProjetos = props.projects;

  const [selectedId, setSelectedId] = React.useState(0);
  const [open, setOpen] = React.useState(false);
  const handleClickOpen = (id) => {
    setSelectedId(id);
    setOpen(true);
  };
  const handleClose = () => {
    setOpen(false);
  };

  let projetos = arrayProjetos.edges[selectedId].node.frontmatter;

  return (
    <Container>
        {arrayProjetos.edges.map(
            function criaCard(e, index){
                let title = e.node.frontmatter.name;
                let imageCard = e.node.frontmatter.images[0];
                return (
                    <>
                    <ImgMediaCard 
                    alt={title} 
                    imagetitle={title}
                    texttitle={title} 
                    src={imageCard}
                    click={() => handleClickOpen(index)}>
                    </ImgMediaCard>
                    </>
                )
            }
        )}
        <AlertDialog 
        imageModal={projetos.images[1]}
        open={open} 
        handleClose={handleClose}
        title={projetos.name}
        text={projetos.description} />
    </Container>
  )
}

Я использую крючки, чтобы открывать правый модальный окна, когда я нажимаю кнопку «Узнать больше» на карточке, все работает нормально, у меня есть 6 карточек, но я могу добавить больше в будущем. Мне просто нужно ограничить количество карточек, которые я вижу, когда захожу на страницу, и иметь кнопку, чтобы показать все.

Answer 1

1. API: вы можете добавить свойства pagination и total к вашему вызову api, который по умолчанию возвращает 2 карты, и вы можете обрабатывать количество карт, увеличивая значение pagination. Вы можете заметить, что нужно добавить проверку, чтобы избежать таких ситуаций, как count > total.

2. Пользовательский интерфейс: вы можете добавить const [cardCount, setCardCount] = useState(2) и сопоставить массив карт до тех пор, пока index не будет больше, чем cardCount значение:

   {arrayProjetos.edges.map((e, index) => { return index <= cardCount && <ImgMediaCard ... /> })}
   
   <Box display={cardCount === 2 ? 'none' : 'block'}>
     <Button 
   onClick={()=> arrayProjetos.edges.length - cardCount === 3 ? setCardCount(...cardCount - 1) : setCardCount(...cardCount - 2)}>See less</Button>
   </Box>
   <Box display={cardCount === arrayProjetos.edges.length ? 'none' : 'block'} >
     <Button
     onClick={() => arrayProjetos.edges.length - cardCount === 1 ? setCardCount(...cardCount + 1) : setCardCount(...cardCount + 2)}>See more </Button>
   </Box>
   

Answer 2

Спасибо, Назар, я сделал нечто подобное, я думаю:

const [showMore, setShowMore] = React.useState(false);

const clickShow = () => {
  setShowMore(oldValue => !oldValue);
  showMore ? setButtonText("Ver Mais >") : setButtonText("Ver Menos <");
};

arrayProjetos.edges.slice(0, showMore ? arrayProjetos.edges.lenght : 2).map(
        function criaCard(e, index){/*same thing here*/})
<button onClick={() => clickShow()}>{buttonText}</button>

Я использовал срез для ограничения массива и ловушку для изменения значения

Answer 3

Как вы получаете карты? Вам нужна ленивая загрузка, если вы получаете с сервера, вы можете реализовать разбиение на страницы, чтобы сервер каждый раз отправлял 2 карты обратно (или на основе данных страницы, которые вы отправляете на сервер), поэтому каждый раз, когда вы нажимаете «загрузить больше» кнопка, вы запускаете функцию, которая запрашивает у сервера еще две карты, и добавляете ответ к вашим картам js переменная