React и вывод елементов

Question

Я беру ресурс и вывожу данные через fetch. Дело в том, что у меня выводятся сразу все элементы с моего ресурса. Есть вопрос, как сделать так чтобы элементы показывались как в интернет магазине: например сначала 30 элементов, появляется снизу кнопочка показать еще 30 элементов? Спасибо большое

import React from "react";
import {Link} from "react-router-dom";

export function Games() {
let [game, setGame] = React.useState([])

let fetchGames = async () => {
let response = await fetch('https://api.sampleapis.com/switch/games');
let json = await response.json()
setGame(json)
}

React.useEffect(() => {
fetchGames()
},[])

return (
<>
<h2>Games</h2>
<div className='all_games'>
{game.map(el => <Link to = {`/games/${el.id}`}><div className='different_game'>{el.name}</div></Link>)}
</div>
</>
)
}

Answer 1

Ваш api должен поддерживать пагинацию. То есть возвращать определенное количество объектов при запросе с указанием количества возвращаемых объектов и страницы.

К примеру при запросе https://api.sampleapis.com/switch/games?page=1&limit=10 или https://api.sampleapis.com/switch/games?page=1&size=10 возвращать первые 10 объектов.

Тогда код будет следующим:

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";

export function Games() {
  const [games, setGames] = useState([]);
  const [page, setPage] = useState(1);

  const fetchGames = async (pageNum = 1) => {
    const response = await fetch(
      `https://api.sampleapis.com/switch/games?page=${pageNum}&limit=30`
    );
    const data = await response.json();
    setGames([...games, ...data]);
  };

  useEffect(() => {
    fetchGames(page);
  }, [page]);

  return (
    <>
      <h2>Games</h2>
      <div className="all_games">
        {games.map((el) => (
          <Link to={`/games/${el.id}`}>
            <div className="different_game">{el.name}</div>
          </Link>
        ))}
      </div>
      <button onClick={() => setPage(page + 1)}>Показать еще</button>
    </>
  );
}

БЛОГ НА HUSL

React и вывод елементов

Ответы (1 шт):