0

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;
2
  • Y que has probado para lograr esto? Por que en el codigo no se ve ningún error relacionado con lo que pides. Así no es como funcionamos aquí.
    – ferter3006
    Commented el 23 mar. 2023 a las 5:46
  • @ferter3006 Lo siento, estimado. De despistado habia pegado una versión anterior de mi código. Ahi lo corregí y reformulé mi pregunta. Gracias Commented el 23 mar. 2023 a las 18:25

1 respuesta 1

1

Primero, cuando monta el componente deberias disparar la petición para que te cargue los primeros resultados segun el limit y offSet que establezcas; supongamos que estableces un estado local llamado Results; segundo, proba con algo así:

const loadMore = async () => {
    try {
      const next = await getMoreResults(pagination, currentPage * pagination);
      setResults((prevTransactions) => [...prevResults, ...next]);
      setCurrentPage((prevPage) => prevPage + 1);
    } catch (error) {
      console.error("Error al cargar más resultados", error);
    }
  };

Y abajo renderizas los Results, entonces cuando carga más, te muestra más.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.