Fetch data inside useEffect hook before rendering - React

Question

I'm building a prototype that fetches a Spotify user's playlist data in React. The data fetching is done inside a useEffect hook and sets the state of playlists variable. Consequently, I want to render the name of each playlist. However, it seems that the data is only fetched after rendering, causing an issue, because the state is not set before rendering, so playlists variable is undefined. How can I solve this problem while continuing to use React hooks? My code is below.

import './App.css'
import queryString from 'query-string'
import React, { useState, useEffect } from 'react'

const App = () => {

  const [userData, setUserData] = useState({})
  const [accesstoken, setAccesstoken] = useState('')
  const [playlists, setPlaylists] = useState({})

  useEffect(() => {

    let parsed = queryString.parse(window.location.search)
    let accesstoken = parsed.access_token
    if (!accesstoken) {
      return
    }
    setAccesstoken(accesstoken)

    fetch('https://api.spotify.com/v1/me', {
      headers: {'Authorization': 'Bearer ' + accesstoken}
    }).then(response => response.json())
    .then(data => setUserData(data))

    fetch(`https://api.spotify.com/v1/me/playlists`, {
      headers: {'Authorization': 'Bearer ' + accesstoken}
    }).then(response => response.json())
    .then(data => setPlaylists(data))

  }, [])

  return(
    <div>
      {accesstoken ? (
        <div>
          <h1>Welcome, {userData.display_name}</h1>
          <h2>Playlists</h2>
          <div>
            {playlists.items.map(playlist => 
              <p>
                {playlist.name}
              </p>
            )}
          </div>
        </div>
      ) : (
        <button onClick={() => window.location = 'http://localhost:8888/login'}>Login</button>
      )}
    </div>
  );
}

export default App;

Siva Kondapi Venkata · Accepted Answer · 2021-01-12 16:28:53Z

0

Use conditional rendering. Check for values in render

   <div>
      {userData && <h1>Welcome, {userData.display_name}</h1>}
      <h2>Playlists</h2>
      {playlists && playlists.items && (
        <div>
          {playlists.items.map((playlist) => (
            <p>{playlist.name}</p>
          ))}
        </div>
      )}
    </div>;

answered Jan 12, 2021 at 16:28

Siva Kondapi Venkata

11.1k2 gold badges20 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sam · Accepted Answer · 2021-01-12 16:24:27Z

You can add a check. see below {playlists && playlists?

import './App.css'
import queryString from 'query-string'
import React, { useState, useEffect } from 'react'

const App = () => {

  const [userData, setUserData] = useState({})
  const [accesstoken, setAccesstoken] = useState('')
  const [playlists, setPlaylists] = useState({})

  useEffect(() => {

    let parsed = queryString.parse(window.location.search)
    let accesstoken = parsed.access_token
    if (!accesstoken) {
      return
    }
    setAccesstoken(accesstoken)

    fetch('https://api.spotify.com/v1/me', {
      headers: {'Authorization': 'Bearer ' + accesstoken}
    }).then(response => response.json())
    .then(data => setUserData(data))

    fetch(`https://api.spotify.com/v1/me/playlists`, {
      headers: {'Authorization': 'Bearer ' + accesstoken}
    }).then(response => response.json())
    .then(data => setPlaylists(data))

  }, [])

  return(
    <div>
      {accesstoken ? (
        <div>
          <h1>Welcome, {userData.display_name}</h1>
          <h2>Playlists</h2>
          <div>
            {playlists && playlists?.items.map(playlist => 
              <p>
                {playlist.name}
              </p>
            )}
          </div>
        </div>
      ) : (
        <button onClick={() => window.location = 'http://localhost:8888/login'}>Login</button>
      )}
    </div>
  );
}

export default App;

That doesn't seem to work... What does that do exactly? I assume it checks if playlists is defined but not sure haha.
It checks if the playlist is not undefined and the playlist has the item. are you seeing a blank screen? I see you have a return statement if the access token is blank. are you sure, you have authentication in place?
It does work like this: playlists && playlists.items && ( <div> {playlists.items.map(playlist => ( <p key={playlist.id}>{playlist.name}</p> ))} </div> )}

Collectives™ on Stack Overflow

Fetch data inside useEffect hook before rendering - React

2 Answers 2

Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Linked

Related