No se puede entender por qué Reaccionar estado está cambiando cuando no estoy mutando cualquiera de los datos o la creación de cualquier Estado

jcq5010:

Estoy trabajando con la API de Spotify en reaccionar y estoy teniendo problemas para averiguar por qué mi estado se está mutado. Aquí está mi fragmento de código:

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

paseo rápido de lo que estos métodos hacen 2:

• Un botón onClick dispara createPlaylist, que toma las chosenPlaylists matriz a partir del estado, mapas sobre ella, y para cada uno llama curatePlaylist que devuelve una lista de reproducción curada.
• En curatePlaylist estoy separando la lista de reproducción argumento en workingPlaylist, así que pensaría nada, entonces lo hago a workingPlaylist no afectaría a mi estado, pero lo hace.
• Cuando realizo mi bucle (que elige al azar # curatedPlaylistNewTotal de pistas, cada vez que empalma el índice elegido de workingPlaylist), no debe esto sólo afectará workingPlaylist, y no nada en el estado? Parece como si mi empalme ha afectado mi estado, pero no puedo entender por qué. ¿Alguien puede ofrecer una explicación?

ACTUALIZACIÓN: ¿Es la razón por la que mi estado se está mutado porque estoy utilizando el operador de difusión y actualización de elementos anidados de esa matriz copiado? Si este es el caso, ¿existe una solución fácil?

Ali Nasserzadeh:

El problema es que está accediendo .tracks, es correcto que se extendió la lista de reproducción, pero que sólo crea una copia superficial. Esto significa que los objetos miembro todavía hacen referencia a los mismos objetos. En sus pistas caso está aún referencia a las pistas en el estado. Usted tendrá que extender las pistas para evitar este problema.