CODEWITHSUNDEEP
javascriptreactjs
calyxofheld
calyxofheld

Reputation: 2128

cause of TypeError: Cannot read properties of undefined

I'm trying to fetch some data from an API. The below code "works" when I log the results to console like console.log(liveInfo.tracks), but when I try to do console.log(liveInfo.tracks.current) it fails with this error: TypeError: Cannot read properties of undefined (reading 'current'). Isn't liveInfo.tracks.current how one would normally access the key-value pair?

componentDidMount() {
 fetch('https://kchungradio.airtime.pro/api/live-info-v2')
 .then(res => res.json())
 .then(
  (result) => {
   this.setState({
    isLoaded: true,
    liveInfo: result 
   })
  }
 )
}

The json looks more or less like this:

{
 "station": {
  "env": "production",
 },
 "tracks": {
  "previous": {
   "name": "a",
   "metadata": {
    "id": 1,
   },
  },
  "current": {
   "name": "b",
   "metadata": {
    "id": 2,
   }
  }
 }
}

Upvotes: 0

Views: 2787

Answers (4)

maremarismaria
maremarismaria

Reputation: 46

It looks you are trying to access to the current before it is filled on the componentDidMount, it means before the fetch has been performed. I suggest you to initialize the state like this:

  state = {
    isLoaded: false,
    liveInfo: {
      tracks: {
        curent: {}
      }
    }
  };

So you will be able to access the current property inside tracks without facing the TypeError. I made a codesandbox, so you can check an example there.

If this does not solve your problem, please let me know ;)

Upvotes: 2

MINJA KIM
MINJA KIM

Reputation: 1008

Because at some point liveInfo.tracks was undefined

Although there is a lack of hints, a common mistake when fetching data from lifecycle is trying to retrieve the value through the state before setData occurs.
Before you use liveInfo, make sure that data fetching is finished

like this

class SomeComponent = {
render() {
if(!this.state.liveInfo?.tracks?.current) return null
....
}

}

Upvotes: 3

C Sharper
C Sharper

Reputation: 8626

Use Question mark (?) ? will check for null. If your object is null ? will handle it.

liveInfo?.tracks?.current

this is the right approach.

Further -

liveInfo?.tracks?.current?.metadata

Upvotes: 0

eifel
eifel

Reputation: 51

Your call looks right, another way to get the value is console.log(liveInfo.tracks["current"]);

but I think your tracks has no value at runtime. Maybe you can show us more code where you are call console.log.

Maybe you run twice in your statement and at first time it is undefined and throw the error. So add a null check like this console.log(liveInfo?.tracks?.current);

Upvotes: 2

Related Questions