Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

94
Vistas
React no se vuelve a renderizar después de una llamada API y cambia el estado

Acabo de reaccionar y estaba tratando de obtener algunos datos de mi api, pero cambiar el estado no activa la nueva representación del componente. Tengo un código dentro de la función useeffect en mi componente que obtiene mi api y luego establece los estados pasado como accesorios. Estos son los estados declarados en App.js:

 const [username,setUsername] = useState(""); const [all,setAll] = useState([]); const [today,setToday] = useState([]);

Los paso a ellos y a sus funciones establecidas como accesorios a APP.js, donde uso la función useeffect para obtener datos y establecer los estados. Así es como se ve el comienzo del código del componente:

 const APP = ({username,all,setAll,today,setToday}) => { useEffect(() => { axios.get(`http://localhost:3001/api/${username}`) .then(response =>{ let data = [response.data]; setAll(data[0]); console.log(all); const t = all.filter((task) => task.title === "a"); setToday(t); console.log(today); }); }, []);

El problema es que los datos se recuperan sin problemas, y setAll también funciona y activa la nueva representación, pero setToday no hace nada (está garantizado que hay una tarea con un título igual a "a"). Cuando registro en la consola { all} en la quinta línea de useeffect, simplemente imprime una matriz vacía a pesar de que se volvió a renderizar y estoy mostrando las tareas de {all} en la página después de volver a renderizar. ¿Es porque cuando llega a la antepenúltima línea, las tareas de {all} aún no se establecieron? Si ese es el caso, ¿cómo puedo esperar antes de filtrar las tareas y luego configurar el otro estado? Sé que hay algunas preguntas similares a esta, pero ninguna de las respuestas en esas preguntas me ayudó.

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

 setAll(data[0]); const t = all.filter((task) => task.title === "a");

El problema es básicamente que en el momento en que estás declarando const t = all.filter((task) => task.title === "a"); , todo sigue siendo una matriz vacía.

Mira, cuando usas setAll , básicamente dice reaccionar: oye, cuando termines de renderizar esto, establece all en el valor data[0] . Eso no sucede inmediatamente, sucede en el siguiente ciclo.

Lo que haría si fuera tú sería algo como esto:

 const APP = ({username,all,setAll,today,setToday}) => { useEffect(() => { axios.get(`http://localhost:3001/api/${username}`) .then(response =>{ const data = [response.data]; const responseAll = data[0]; const t = responseAll.filter((task) => task.title === "a"); setAll(responseAll); setToday(t); }); }, []);
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda