Estoy usando Axios para obtener una DeezerAPI, así que ante todo renderizo información usando un .map() y todo estuvo bien al acceder a la información y pasarla a un Componente, pero cuando intento acceder a un solo objeto JSON obtengo un error 'indefinido'.
Ejemplo de solicitud de Axios React.js
//State with Redux //No problem with Redux const apiData = useSelector((state) => state.data); //Local State to store fetched data from API const [Songs, setSongs] = useState([]); //AXIOS everything is fine here useEffect(() => { const getFetchData = async () => { try { const res = await axios.request({ method: "GET", url: "https://deezerdevs-deezer.p.rapidapi.com/search", params: { q: apiData }, //apiData is for searching an artist, song... headers: { "X-RapidAPI-Host": "deezerdevs-deezer.p.rapidapi.com", "X-RapidAPI-Key": "randomNumbersKey", }, }); const data = res.data.data; setSongs(data); //stored in state } catch (error) { console.log(error); } }; getFetchData(); }, [apiData]);Entonces, cuando intento acceder a un solo objeto JSON usando un console.log() como el siguiente ejemplo
console.log(Songs[0].title)
Me sale un error diciendo esto:
Uncaught TypeError: Cannot read properties of undefined (reading 'title')
Todavía no sé por qué sucede esto al seleccionar un solo objeto, si uso un .map() no tendré ningún problema.
Gracias de antemano por cualquier ayuda :D
Parece que tienes un problema clásico de programación asincrónica. Tanto el setState de su anuncio de recuperación se ejecutan de forma asincrónica, lo que significa que la función de procesamiento continúa ejecutándose y no espera a que finalice la recuperación. Entonces, en el momento en que accede a los resultados en su procesamiento, Songs es una matriz vacía. En JS, la indexación fuera de los límites de la matriz devuelve indefinido, en lugar de arrojar, de ahí el error que está viendo.
Al escribir un componente React, siempre debe manejar la situación en la que los efectos aún no se han ejecutado y su estado está en su estado predeterminado. El uso del map en su caso maneja esto, porque el mapeo sobre una matriz vacía produce una matriz vacía, que reacciona no se procesa. Otra opción es verificar si está en su estado inicial y devolver nulo. Esto evitará que la reacción represente cualquier cosa en el DOM hasta que se actualice el estado.
En general, en React, no asuma que conoce el valor del estado en un momento dado. En su lugar, maneje cada estado posible diferente
El valor inicial del estado es [] .
Por lo tanto, puede map (y recuperar una matriz vacía), pero si intenta acceder a Songs[0] , no estará undefined y acceder a una propiedad generará un error.
Después del renderizado inicial, el gancho de efectos se ejecutará y (un poco más tarde) aparecerá la respuesta de Ajax y actualizará el valor en los estados (presumiblemente con una matriz que no está vacía).
Hasta entonces, no puede acceder al primer elemento inexistente de la matriz.
Podría probarlo y actuar condicionalmente:
if (Songs[0]) { // something with Songs[0].title } else { // Something else }