jcq5010:
リアクトに私が楽しんでるのAPIで働いていると私は私の状態が変異されている理由を考え出すのトラブルを抱えています。ここに私のコードスニペットは、次のとおりです。
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の状態からchosenPlaylists配列を受け取りcreatePlaylistを、発射ボタンは、その上にマッピングし、それぞれについてキュレーションプレイリストを返すcuratePlaylistを呼び出します。
- curatePlaylistで私はその後、workingPlaylistに行う何かが私の状態に影響を与えないと思うだろうので、私は、workingPlaylistへの引数のプレイリストを広げていますが、それはありません。
- 私は私のforループを実行する場合(これはランダムにトラックのcuratedPlaylistNewTotal#を選択し、それぞれの時間スプライシングworkingPlaylistから選ばれた指数)は、これが唯一の状態では何もworkingPlaylistに影響を与え、そしてませんではないでしょうか?私のスプライスが私の状態に影響を与えているかのように見えますが、私は理由を理解することはできません。誰もが説明を提供することができますか?
UPDATE:私はスプレッド演算子を使用して、そのコピーされた配列のネストされたアイテムを更新していますので、私の状態が変異されている理由ですか?このような場合は、簡単な回避策はありますか?
アリNasserzadeh:
問題は、あなたが.tracksにアクセスしているということです、あなたがプレイリストを広めなかったことが正しいですが、それは唯一の浅いコピーを作成します。メンバーオブジェクトがまだ同じオブジェクトを参照すること。この手段。あなたのケースでは、トラックは、静止状態であなたのトラックを参照しています。あなたはこの問題を回避するためにトラックを広める必要があります。