ReactJS Spread运算符

Question

我正在使用React。

我的状态中有一系列对象。

this.state = {
  team: [{
    name:'Bob',
    number:23
  },
  {
    name:'Jim',
    number:43
  }]
}

当我尝试制作数组的副本来更改对象的属性时，我没有得到我想要的结果。

我试过了：

let tempTeam = [...this.state.team]

对tempTeam的任何更改也会改变this.state.team

和

let tempTeam = this.state.team.map(player => return {...player})

这只是抛出一个错误，它不喜欢{...player}

如果没有它引用this.state.team，我如何获得对象数组？

Answer 1

发布的代码中存在语法错误。如果您将其更改为：

let tempTeam = this.state.team.map(player => ({...player}));

要么：

let tempTeam = this.state.team.map(player => { 
                 return { ...player };
               });

您将获得一个具有相同对象值的新数组，而不包含引用。

Answer 2

Object.assign和spread语法创建浅拷贝。如果改变复制的属性中的嵌套属性，则还会改变原始对象。

大多数时候我们使用map，filter，slice来使用原始阵列来获得新阵列。但是，即使使用这些方法，我们也不应该直接改变属性，我们应该再次使用Object.assign或扩展语法返回新的属性。

如上所述，您的代码中存在语法错误，如果您修复它，您可以获得新数组。但是，大多数时候你会做这样的操作：

const state = {
  team: [{
    name:'Bob',
    number:23
  },
  {
    name:'Jim',
    number:43
  }]
};

const changeAll = state.team.map( player => ({
  ...player, number: player.number + 1, 
}));

// or

const playerTheOne = state.team.filter(player => player.number === 23);
const notPlayerTheOne = state.team.filter(player => player.number !== 23);

// or

const changeJustOne = state.team.map( player => {
  if ( player.number === 23 ) {
    return { ...player, name: "Joe" };
  }
  return player;
});
console.log( state.team );
console.log( changeAll );
console.log( playerTheOne );
console.log( notPlayerTheOne );
console.log( changeJustOne );

正如您所看到的，您不会创建新数组然后对其进行变异，而是在创建它时进行变异。

Answer 3

使用Array.slice（）创建一个克隆，所以这应该工作：

let tempTeam = this.state.team.slice();