en nextJS estoy trayendo datos de una api y me gustaría implementar un botón para cargar 40 elementos más cada vez que se presione el botón y que cuando se haya alcanzado el máximo de elementos para mostrar, que el botón desaparezca. El problema principal es que cuando hago click, me vuelve a recargar los mismos resultados que tengo en un principio.
el console.log(handleLoadMore) me arroja lo siguiente:
Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
26 | 27 | const handleLoadMore = () => {
28 | setLimit((prevLimit) => prevLimit + 40); | ^ 29 | if (typeof window !== "undefined") { 30 | router.push(
/weapons?limit=${limit + 40}
); 31 | }
Gracias de antemano.
import { useState } from "react";
import { useRouter } from "next/router";
export const getStaticProps = async (context) => {
const limit = context.query?.limit || 40;
const response = await fetch(
`https://eldenring.fanapis.com/api/weapons?limit=${limit}`
);
const { data: weapons } = await response.json();
console.log(weapons);
return {
props: { weapons },
};
};
const Weapons = ({ weapons }) => {
const router = useRouter();
const [limit, setLimit] = useState(40);
const handleLoadMore = () => {
setLimit((prevLimit) => prevLimit + 40);
if (typeof window !== "undefined") {
router.push(`/weapons?limit=${limit + 40}`);
}
};
//console.log(handleLoadMore());
return (
<Layout
title="Weapons"
description="Weapons, Elden Ring Database, Enciclopaedia, game guide"
>
<main className="container">
<h1 className="heading">Weapons</h1>
<section>
<h2 className="subtitle">Elden Ring Weapon Types</h2>
<div className={styles.weapons_container}>
{weapons.slice(0, limit).map((weapon) => (
<WeaponCategories key={weapon.id} weapon={weapon} />
))}
</div>
</section>
<button onClick={handleLoadMore}>Load more</button>
</main>
</Layout>
);
};
export default Weapons;