Question

我正在使用React。

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

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

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

我尝试过：

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

对tempTeam的任何更改也会使this.state.team发生变化

AND

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和传播语法创建浅表副本。如果您在复制的属性中更改嵌套属性，那么您也会同时更改原始对象。

大多数时候，我们使用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();

ReactJS传播运算符

3 个答案: