const artistInfoHandler = (id) => { setLoading(true); setAlbums([]); fetch(`https://api.spotify.com/v1/artists/${id}/albums`, { headers: { Accept: "application/json", Authorization: `Bearer ${data.access_token}`, "Content-Type": "application/json", }, }) .then((response) => response.json()) .then((response) => { console.log(response); for (let i = 0; i < response.items.length; i++) { setAlbums((old) => [ ...old, { albumTitle: response.items[i].name, albumImage: response.items[i].images[0].url, }, ]); } }) .catch((error) => console.log(error)); setLoading(false); }; 0: {albumTitle: 'Certified Lover Boy', albumImage: 'xxxxxxxxxxxx'} 1: {albumTitle: 'Certified Lover Boy', albumImage: 'xxxxxxxxxxxxxxxxxx'} 2: {albumTitle: 'Dark Lane Demo Tapes', albumImage: 'xxxxxxxxxxxxxxxxxx'} 3: {albumTitle: 'Dark Lane Demo Tapes', albumImage: 'xxxxxxxxxxxx'} 4: {albumTitle: 'Care Package', albumImage: 'xxxxxxxxxxxx'} 5: {albumTitle: 'Care Package', albumImage: 'xxxxxxxxxxxx'} 6: {albumTitle: 'So Far Gone', albumImage: 'xxxxxxxxxxxx'} 7: {albumTitle: 'Scorpion', albumImage: 'xxxxxxxxxxxx'} 8: {albumTitle: 'Scorpion', albumImage: 'xxxxxxxxxxxx'} 9: {albumTitle: 'More Life', albumImage: 'xxxxxxxxxxxx'} 10: {albumTitle: 'More Life', albumImage: 'xxxxxxxxxxxx'} 11: {albumTitle: 'Views', albumImage: 'xxxxxxxxxxxx'} 12: {albumTitle: 'Views', albumImage: 'xxxxxxxxxxxx'} 13: {albumTitle: 'What A Time To Be Alive', albumImage: 'xxxxxxxxxxxx'} 14: {albumTitle: 'What A Time To Be Alive', albumImage: 'xxxxxxxxxxxx'} 15: {albumTitle: "If You're Reading This It's Too Late", albumImage: 'xxxxxxxxxxxx'} 16: {albumTitle: "If You're Reading This It's Too Late", albumImage: 'xxxxxxxxxxxx'} 17: {albumTitle: 'Nothing Was The Same (Deluxe)', albumImage: 'xxxxxxxxxxxx'} 18: {albumTitle: 'Nothing Was The Same (Deluxe)', albumImage: 'xxxxxxxxxxxx'} 19: {albumTitle: 'Nothing Was The Same', albumImage: 'xxxxxxxxxxxxxxxxxx'}
ahora, cuando NO estoy usando una matriz de objetos, es decir, cuando estoy almacenando los datos en un estado diferente, entonces puedo eliminar la duplicación con esto: const newAlbums = [...new Set(albums)] pero cuando estoy usando una matriz de objetos no puedo hacerlo.
En tu caso, creo que deberías hacer:
//removes duplicate names var filteredItems = response.items.filter((v,i,a)=>a.findIndex(v2=>(v2.name===v.name)) === i); //maps to a new object array var newArray = filteredItems.map(x => ({ albumTitle: x.name, albumImage: x.images[0].url, }));