javascript - 当我将状态保存到变量时会发生什么？

Question

我正在使用 Spotify API 进行一些测试，发现了这个，我发现它很奇怪。

基本上，我将变量 testarr 设置为等于状态。然后我只想更新 testarr 变量。但是当我运行这个函数并将状态 songList 和 testarr 记录到控制台时，它们是相同的。我觉得奇怪的是我从来没有更新过状态，那么它怎么能改变呢？

testing(){
    let testarr = this.state.songList;
    let testsongs = this.state.songs;

    for(var i = 0; i < testsongs.length; i++){
      for(var j = 0; j < testarr.length; j++){
        if(testsongs[i] === testarr[j].songname){
          testarr[j].count += 1;
          testarr.push({
            songname: 'hej',
            count: 1
          });
        }
      }
    }

    clearInterval(this.interval);
    console.log("songlist ");
    console.log(this.state.songList);
    console.log("songs " + this.state.songs);
    console.log("tessong " + testsongs);
    console.log("testarr ");
    console.log(testarr);
}

Answer 1

当你这样设置变量时:

let testarr = this.state.songList;

实际上，您根本没有创建不同的数组。您的新 testarr 变量实际上指向此处的原始数组。因此，当您更改新数组时，原始数组也会更改。

const foo = [ 1, 2, 3 ];
const bar = foo;
bar[0] = 100;
console.log( foo );

你不应该那样改变状态。您可以使用 spread syntax 创建一个新数组像这样:

let testarr = [ ...this.state.songList ];

或者您可以更喜欢 concat 它也不会改变原始数组:

let testarr = this.state.songList.concat( [] );

通过这种方式，当您更改新的 testarr 时，原始的会保持原样。

const foo = [ 1, 2, 3 ];
const bar = [ ...foo ];
bar[0] = 100;
console.log( foo );

所以，在使用 React 编码时，永远不要改变你的状态。始终使用扩展语法或 concat 方法进行复制。更改数组时，请使用 slice 而不是 splice，因为后者也会改变原始数组。

这个概念也适用于对象。不要改变它们。