Почему массив меняет все свои значения?

Question

[Incold]

Здравствуйте! Столкнулся с проблемой, и не могу понять в чём дело. Есть массив объектов gameHistory, у каждого объекта есть свойство array, но когда я добавляю в массив новый объект, у которого есть свой array, то каждый gameHistory[i].array становиться равен gameState.array

Reducer:

const initialState = {
  moveInfo: [],
  gameHistory: []
};

export default function moveHistory(state=initialState, action) {

  switch (action.type) {
    case 'ADD_MOVE':
      return {
        ...state,
        moveInfo: [...state.moveInfo, action.move],
        gameHistory: [...state.gameHistory, action.gameState]
      }
      break;
       ...
   }
}

Action:

export const addMove = (currentPlayer, location, gameState) => {
//console.log выводит правильно, т.е. приходит  gameState.array такой какой должен быть
  return ({
    type: 'ADD_MOVE',
    move: `Ходит "${currentPlayer}" на позицию [${location.map(item => item+1)}]`,
    gameState: gameState 
  })
}

Кусок кода, где этот action вызывается:

let move = getState().game.moveCount;
let array = [...getState().game.squaresValue];
let currentPlayer = getState().game.currentPlayer;

array[num[0]][num[1]] = currentPlayer; // num приходит в аргументах
dispatch(addMove(currentPlayer, num, {array: array, // именно в этом свойстве проблема
currentPlayer: currentPlayer, moveCount: move}));

В итоге получается, что каждый промежуточный console.log(array) выводит мне то, что я ожидаю увидеть, но subscribe показывает, что свойство array в каждом элементе массива gameHistory становится равно свойству array добавленного объекта gameState.
Как это исправить? Спасибо, за любую помощь!

Comments

[Дмитрий]

Прочитал два раза, так и не понял, что выводит консол.лог и что такое субскрайб. Из кода никак не следует что добавление новой игры может как-то влиять на весь массив.

[Incold]

Дмитрий, subscribe - это значит, store.subscribe(), т.е. сделай что-то, когда меняется state (я просто вывожу в консоль текущее состояние приложения)

Постараюсь объяснить проблему понятнее.
Есть массив объектов gameHistory, у каждого объекта есть свойство array, но когда я добавляю в массив новый объект, у которого есть свой array, то каждый gameHistory[i].array становиться равен gameState.array

[Дмитрий]

Incold, Вы можете привести код которым вы выводите, результат который получаете и результат, который вы ожидаете, все очень сумбурно. Еще раз - в коде я не вижу никаких подводных камней.

[Дмитрий]

Скорей всего затык с выводом в консоль

[Incold]

Дмитрий,
Это при первом добавлении в массив (console.log стоит прямо перед return в reducer)

А это при втором, можно увидеть, что в gameHistory два элемента, но первый теперь равен только что добавленному, причём это касается только свойства array

Answer 1

[forspamonly2]

let array = [...getState().game.squaresValue]; - здесь вы делаете копию только внешнего массива. у вас же он двумерный, то есть во внешнем массиве строк лежат внутренние массивы ячеек.
в результате в клоне внешнего масива лежат ссылки на оригиналы внутренних массивов и изменения в них видны во всех копиях.
замените на что-нибудь вроде

let array = getState().game.squaresValue.map(row => [...row]);

Comments

[Incold]

Большое, спасибо!