从ReactJ中的Spotify API中删除重复数据

Question

so I am getting data Spotify API in JSON but the data I am receiving is duplicated and I want to remove the duplicate data...
so what does the following function do: it fetches the data from Spotify API and as you can see I am storing the fetched data in ```setAlbums()``` (which is a useState array of object const).

  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);
  };

and this is the output:

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'}

现在，当我不使用一系列对象IE时，当我将数据存储在不同的状态常量处时，我就可以通过以下方式删除重复性： const newAlbums = [... new Set（preams）]，但是当我使用的对象数组时，我无法做到。

Answer 1

在您的情况下，我认为您应该这样做：

//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,
}));