Как создать объект с помощью вызовов API в componentDidMount для установки состояния

Question

Я дурачусь в React с API Spotify, и у меня возникают проблемы с вызовами API для вложенных данных. Мой план в componentDidMount заключался в следующем:

1. извлекать данные учетной записи пользователя
2. использовать эти данные учетной записи для извлечения списков воспроизведения пользователя
3. использовать эти списки воспроизведения для извлечения дорожек в каждом список воспроизведения
4. создание объекта списка воспроизведения, который содержит имя, идентификатор и дорожки
5. pu sh объекты списка воспроизведения в массив списка воспроизведения
6. установка состояния с данными учетной записи пользователя и Массив плейлиста

Вот мой componentDidMount и мой метод выборки треков плейлиста:

    async componentDidMount() {
        const userResponse = await axios.get(`https://api.spotify.com/v1/me`, {
            headers: {
                Authorization: 'Bearer ' + this.state.access_token
            }
        });

        const playlistsResponse = await axios.get(
            `https://api.spotify.com/v1/users/${userResponse.data.id}/playlists`,
            {
                headers: {
                    Authorization: 'Bearer ' + this.state.access_token
                }
            }
        );


        let playlists = [];
        playlistsResponse.data.items.map((playlist) => {
      const tracks = this.getTracks(playlist.id);
            let newPlaylist = {
                name: playlist.name,
                id: playlist.id,
                tracks: tracks
            };
            playlists.push(newPlaylist);
        });

        this.setState({
            playlists: playlists,
            userData: userResponse.data
        });
    }

    async getTracks(playlistID) {
        const tracks = await 
axios.get(`https://api.spotify.com/v1/playlists/${playlistID}/tracks`, {
            headers: {
                Authorization: 'Bearer ' + this.state.access_token
            }
        });
        return tracks;
    }

После того, как консоль вошла в состояние рендеринга, я вижу, что я смогла установить userData в состояние , Я также был в состоянии установить списки воспроизведения, однако, только имя и идентификатор пропускаются, и треки устанавливаются как Обещания. Нахожусь ли я на правильном пути, пытаясь сделать API-вызовы track внутри карты, чтобы я мог создавать объекты моего списка воспроизведения по одному за раз?

ОБНОВЛЕНИЕ:

Так что я получил его с помощью назначение моего обратного вызова карты как функции asyn c. Вот фрагмент:

        let playlists = [];

        playlistsResponse.data.items.map(async (playlist) => {
            const tracksResponse = await axios.get(`https://api.spotify.com/v1/playlists/${playlist.id}/tracks`, {
                headers: {
                    Authorization: 'Bearer ' + this.state.access_token
                }
            });

            let newPlaylist = {
                name: playlist.name,
                id: playlist.id,
                tracks: tracksResponse
            };
            playlists.push(newPlaylist);
        });

        this.setState({
            playlists: playlists,
            userData: userResponse.data
        });
    }

Это честный способ справиться с этим? Для меня имеет смысл, что я жду данных trackResponse на каждой итерации карты, прежде чем использовать их позже при создании объекта моего списка воспроизведения. Это безопасная / обычная практика - оборачивать мой обратный вызов карты в async / await?

ОБНОВЛЕНИЕ 2:

Хорошо, возможно, это не сработало. Я вижу все в состоянии, когда проверяю Chrome devtools, но когда я пытаюсь отобразить то, что в состоянии, ничего не выплевывается.

Answer 1

Вы, вероятно, setState, прежде чем разрешить свою карту. Я бы предложил вам использовать Promise.all, вот так:

let playlists = [];
    const map = playlistsResponse.data.items.map((playlist) => {
  const tracks = this.getTracks(playlist.id);
        let newPlaylist = {
            name: playlist.name,
            id: playlist.id,
            tracks: tracks
        };
        playlists.push(newPlaylist);
    });

   await Promise.all(map);

    this.setState({
        playlists: playlists,
        userData: userResponse.data
    });