ReactJS Spread Operator

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 и распространяемый синтаксис создают мелкие копии.Если вы изменяете вложенное свойство в скопированном, вы также изменяете исходный объект.

В большинстве случаев мы используем 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();