Estoy tratando de obtener algunos datos de una API. El siguiente código "funciona" cuando registro los resultados en la consola como console.log(liveInfo.tracks) , pero cuando intento hacer console.log(liveInfo.tracks.current) falla con este error: TypeError: Cannot read properties of undefined (reading 'current') . ¿No es liveInfo.tracks.current cómo se accedería normalmente al par clave-valor?
componentDidMount() { fetch('https://kchungradio.airtime.pro/api/live-info-v2') .then(res => res.json()) .then( (result) => { this.setState({ isLoaded: true, liveInfo: result }) } ) }El json se ve más o menos así:
{ "station": { "env": "production", }, "tracks": { "previous": { "name": "a", "metadata": { "id": 1, }, }, "current": { "name": "b", "metadata": { "id": 2, } } } }Porque en algún momento liveInfo.tracks no estaba undefined
Aunque faltan sugerencias, un error común al obtener datos del ciclo de vida es intentar recuperar el valor a través del estado antes de que se produzca setData.
Antes de usar liveInfo , asegúrese de que la obtención de datos haya finalizado.
como esto
class SomeComponent = { render() { if(!this.state.liveInfo?.tracks?.current) return null .... } }Parece que está intentando acceder a la current antes de que se llene en el componentDidMount , lo que significa que antes de que se haya realizado la recuperación. Te sugiero que inicialices el estado de esta manera:
state = { isLoaded: false, liveInfo: { tracks: { curent: {} } } }; Por lo tanto, podrá acceder a la propiedad current dentro de tracks sin enfrentar el TypeError . Hice un codesandbox, así que puedes ver un ejemplo allí.
Si esto no resuelve su problema, hágamelo saber;)
Su llamada parece correcta, otra forma de obtener el valor es console.log(liveInfo.tracks["current"]);
pero creo que tus pistas no tienen valor en tiempo de ejecución. Tal vez pueda mostrarnos más código donde está llamando a console.log.
Tal vez ejecuta dos veces en su declaración y la primera vez no está definida y arroja el error. Así que agregue una verificación nula como esta console.log(liveInfo?.tracks?.current);