0

I just don't know why it isn't working. here are my states.

    const [albums, setAlbums] = useState([])
    const [artist, setArtist] = useState([])
    const [artistImages, setArtistImages] = useState([])

and here I'm setting the states.

     axios.get(`/music/api/artist/1/`)
            .then(res => {
                setAlbums(res.data.albums);
                setArtist(res.data);
                setArtistImages(res.data.about_images);
                console.log(res.data.albums)
            }).catch(err => {
                console.log(err)
            })

this is the response I'm getting from server

   BgImage: "http://127.0.0.1:8000/media/images/001_3uKSvDp.jpg"
   about_images: Array(1)
   0: {id: 1, image1: 
   "http://127.0.0.1:8000/media/images/1034349_xl06j1h.jpg", 
   image2: null, image3: null, image4: null, …}
   length: 1
   __proto__: Array(0)
   albums: Array(3)
   0: {id: 1, album_name: "Fearless (Taylor's Version)", artwork: 
  "http://127.0.0.1:8000/media/images/001.jpg", artist: "Taylor Swift"}
   1: {id: 7, album_name: "Reputation", artwork: 
   "http://127.0.0.1:8000/media/images/001_1.jpg", artist: "Taylor Swift"}
   2: {id: 8, album_name: "1989", artwork: 
   "http://127.0.0.1:8000/media/images/002.jpg", artist: "Taylor Swift"}
   length: 3
   __proto__: Array(0)
   artist_name: "Taylor Swift"
   born: "1989-12-13"
   id: 1
   image: "http://127.0.0.1:8000/media/images/011.jpg"

problem I'm having is only setAlbums does not get set. all other states set like setArtist setArtistImages just Album does not set. and even if I console.log(res.data.albums) it returns the album. but setAlbum does not work. I just don't know why....

Amisha Mundra
  • 47
  • 1
  • 9
  • can you paste the complete response – programoholic Jun 04 '21 at 17:40
  • Some additional code context may also be helpful. – Brian Thompson Jun 04 '21 at 17:43
  • try console logging the state outside of the http request – anthony_718 Jun 04 '21 at 17:54
  • if I directly console out state after and outside http request. it gives an empty array. that's what i'm saying it's not setting state – Amisha Mundra Jun 04 '21 at 17:56
  • 1
    @AmishaMundra That's not what you should do . You should check the updated state once you set it. Also state updates are queued so you might not get it immediatly after setting. There are different way to handle this type of update; – programoholic Jun 04 '21 at 18:04
  • @programoholic yes I'm using the state after. but still it's empty – Amisha Mundra Jun 04 '21 at 18:15
  • @AmishaMundra Please checkout [this answer](https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately) for more about why you may not see state updates immediately after setting them. "After" is not clear on if you're checking the updates at a correct place. – Brian Thompson Jun 04 '21 at 18:17
  • How are you verifying or validating that *some* state just didn't update? You could try console logging your state values in an `useEffect` hook with a dependency on *that* specific chunk of state. If the enqueued value is different than current state it should update and trigger a rerender. – Drew Reese Jun 04 '21 at 19:54

1 Answers1

0

try this

axios.get(`/music/api/artist/1/`)
            .then(res => {
                const newAlbums = [...albums].concat(res.data.albums)
                setAlbums(newAlbums);
                setArtist(res.data);
                setArtistImages(res.data.about_images);
                console.log(res.data.albums)
            }).catch(err => {
                console.log(err)
            })
Amir Hossein
  • 133
  • 5