Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

93
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!