La función 'useEffect' se utiliza para recuperar datos y luego almacenarlos en la matriz 'ratings'. Actualmente estoy tratando de recorrer los elementos de la matriz de "calificaciones" para poder registrar su contenido en la consola. Esto funciona cuando el componente se monta por primera vez, pero deja de funcionar una vez que se actualiza la página. Descubrí que puedo hacer que funcione colocando 'forEach' fuera de la función useEffect, pero me preguntaba por qué no funciona dentro de la función y si hay otra solución.
const Rating = ({id}) => { let url=`https://api.jikan.moe/v3/anime/${id}/stats`; const [ratings, setRatings] = useState([]); useEffect(() => { (async function() { try{ const res = await axios.get(url); setRatings(Object.values(res.data.scores)); if (ratings) ratings.forEach((rating)=>{console.log(rating.votes)}); //Doesn't work after refresh } catch(err) { console.log(err); } })(); }, [url]) ... } export default Rating;Cuando haces setRatings(Object.values(res.data.scores)); , el estado de las ratings no se actualiza inmediatamente, por lo que if (ratings) sigue siendo la matriz vacía cuando se ejecuta la aplicación if (ratings) ... .
Haz algo como esto en su lugar:
const scores = Object.values(res.data.scores); setRatings(scores); if (scores) scores.forEach((rating)=>{console.log(rating.votes)}); o use otro useEffect para las ratings para que se ejecute cuando se actualice:
useEffect(() => { if (ratings) ratings.forEach((rating)=>{console.log(rating.votes)}); }, [ratings]);