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ó.
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); }); }, []);