Не могу понять, почему состояние React меняется, когда я нигде не изменяю ни одно из данных или состояние установки - PullRequest
Новая
       4

Не могу понять, почему состояние React меняется, когда я нигде не изменяю ни одно из данных или состояние установки

0 голосов
/ 01 апреля 2020

Я работаю с Spotify API в React и не могу понять, почему мое состояние видоизменяется. Вот мой фрагмент кода: 

curatePlaylist(playlist) {
        const workingPlaylist = { ...playlist };
        let curatedPlaylistNewTotal = workingPlaylist.level / 100 * workingPlaylist.tracks.length;
        const newPlaylist = [];
        for (let i = 0; i < curatedPlaylistNewTotal; i++) {
            let randomIndex = Math.floor(Math.random() * workingPlaylist.tracks.length);
            newPlaylist.push(workingPlaylist.tracks[randomIndex]);
            workingPlaylist.tracks.splice(randomIndex, 1);
        }
        return newPlaylist;
    }

    async createPlaylist() {
        const curatedChosenPlaylists = this.state.chosenPlaylists.map((p) => this.curatePlaylist(p));
        const newPlaylist = [].concat(...curatedChosenPlaylists);
        this.shuffle(newPlaylist);
        const response = await axios.post(
            `https://api.spotify.com/v1/users/${this.state.userData.id}/playlists`,
            { name: 'generatedPlaylist' },
            {
                headers: {
                    Authorization: 'Bearer ' + this.state.access_token
                }
            }
        );
        const newResponse = await axios.post(
            `https://api.spotify.com/v1/playlists/${response.data.id}/tracks`,
            { uris: this.formatURIs(newPlaylist) },
            { headers: { Authorization: 'Bearer ' + this.state.access_token } }
        );
    }

Краткое описание того, что делают эти 2 метода:

  • Кнопка onClick запускает createPlaylist, который берет массив selectedPlaylists из состояния и отображает его. и для каждого вызывает curatePlaylist, который возвращает курируемый плейлист.
  • В curatePlaylist я распространяю список воспроизведения аргументов в workingPlaylist, поэтому я думаю, что все, что я потом сделаю с workingPlaylist, не повлияет на мое состояние, но это так.
  • Когда я выполняю мой для l oop (который случайным образом выбирает curatedPlaylistNewTotal # дорожек, каждый раз соединяя выбранный индекс с workingPlaylist), это не должно влиять только на workingPlaylist, а не на что-либо в состоянии? Кажется, что мое соединение повлияло на мое состояние, но я не могу понять, почему. Может кто-нибудь предложить объяснение?

ОБНОВЛЕНИЕ: Является ли причина, по которой мое состояние изменяется, потому что я использую оператор распространения, а затем обновляю вложенные элементы этого скопированного массива? Если это так, есть ли простой обходной путь?

1 Ответ

0 голосов
/ 01 апреля 2020

Проблема в том, что вы обращаетесь к .tracks, это правильно, что вы распространили плейлист, но это создает только поверхностную копию. Это означает, что объекты-члены по-прежнему ссылаются на одни и те же объекты. В вашем случае треки все еще ссылаются на ваши треки в состоянии. Вам нужно будет раздвинуть дорожки, чтобы избежать этой проблемы.

...