How to handle response.item is undefined? - reactjs

Question

I am getting the error below although I bound getNowPlaying, can someone help if I am missing something in my code? Is the way I tried to import SpotifyWebApi wrong?
Here is the code that causes problems:
import React, { Component } from 'react';
import './App.css';
import SpotifyWebApi from 'spotify-web-api-js';
const spotifyApi = new SpotifyWebApi();
class App extends Component {
constructor(props){
super(props);
const params = this.getHashParams();
const token = params.access_token;
if (token) {
spotifyApi.setAccessToken(token);
}
this.state = {
loggedIn: token ? true : false,
nowPlaying: { name: 'Not Checked', albumArt: '' }
}
this.getNowPlaying=this.getNowPlaying.bind(this);
}
getNowPlaying(){
spotifyApi.getMyCurrentPlaybackState()
.then((response) => {
this.setState({
nowPlaying: {
name: response.item.name,
albumArt: response.item.album.images[0].url
}
});
})
}
render() {
return (
<div className="App">
<a href='http://localhost:8888' > Login to Spotify </a>
<div>
Now Playing: { this.state.nowPlaying.name }
</div>
</div>
);
}
}
export default App;

Answer 1

According to Spotify docs
Response A successful request will return a 200 OK response code with
a json payload that contains information about the currently playing
track or episode and its context (see below). The information returned
is for the last known state, which means an inactive device could be
returned if it was the last one to execute playback.
When no available devices are found, the request will return a 200 OK
response but with no data populated.
When no track is currently playing, the request will return a 204 NO
CONTENT response with no payload.
If private session is enabled the response will be a 204 NO CONTENT
with an empty payload.
That means that even if your request is successful (200 OK), the response can be empty so you need to do defensive programming by checking if the response is not empty
I am not sure what is the exact object the request returns but you can do something like this
spotifyApi.getMyCurrentPlaybackState()
.then((response) => {
this.setState({
nowPlaying: {
name: response && response.item && response.item.name,
albumArt: response && response.item && response.item.album && response.item.album.images.length > 0 && response.item.album.images[0].url
}
});
})
The problem here is that the properties you need are deeply nested, and also you need to check if the images array length is greater than 0, so probably a better approach is to store all the response object in the state and then checking it at render time.
if that's not possible you can use optional chaining but for that you will have to use a babel plugin https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining
And then you can do
spotifyApi.getMyCurrentPlaybackState()
.then((response) => {
this.setState({
nowPlaying: {
name: response?.item?.name,
albumArt: response?.item?.album?.images[0].url
}
});
})