1

Tengo un problema al llamar a una función para cargar apenas se inicia la pagina. Tengo una función getTasks() que me devuelve un array con tareas que se crearon. dentro de mi componente listTasks quería que se muestren, para eso tengo que ejecutar getTasks dentro del useEffect, pero cuando lo ejecuto la consola me empieza a lanzar en cascada miles de console.log(task), que es el array con las tareas. No sé cómo modificarlo o si hay algo que esté haciendo mal.

El código es este:

const getTasks = async () => {
  const respuesta = await fetch(_urlTasks + "/tasks");
  const data = await respuesta.json();

  console.log(data);

  if(tasks.length === 0){
    setTasks({
      hayTareas: false,
      data
    });
  }else{
      
    setTasks({
      data,
      hayTareas: true
    });
  }
    
}

useEffect(()  => {
  getTasks();
});

1 respuesta 1

1

No tengo mucha experiencia con React, pero diría que es porque useEffect se ejecuta en cada renderizado del componente. Al no indicarle un segundo parámetro, lo hace cada vez que cambia el estado del componente. Para ejecutarlo sólo una vez, añade [] como segundo parámetro del hook useEffect. Tu código quedaría de la siguiente forma:

const getTasks = async () => {
  const respuesta = await fetch(_urlTasks + "/tasks");
  const data = await respuesta.json();

  console.log(data);

  if(tasks.length === 0){
    setTasks({
      hayTareas: false,
      data
    });
  }else{
      
    setTasks({
      data,
      hayTareas: true
    });
  }
    
}

useEffect(()  => {
  getTasks();
}, []);

El segundo parámetro indica una lista de dependencias. Digamos que son las variables que debe observar este Hook.

Te dejo por aquí la documentación a esto, por si no me he explicado bien :)

https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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