Реагируйте: назначение Javascript не обновляет объект

Question

Код здесь: https://codesandbox.io/s/github/nieroda/js_err

В функции endTurn

    console.log(`GameBoard Before`)
    console.log(gameBoardCopy)

    gameBoardCopy[currentRow][4] = { numColorMatch: 2, numExactMatch: 2 }

    console.log(`GameBoard After`)
    console.log(gameBoardCopy)

См. Консольный вывод

Before:
5: Array(5)
0: "BlueViolet"
1: "BlueViolet"
2: "BlueViolet"
3: "BlueViolet"
4: {numColorMatch: 0, numExactMatch: 0}

After 

5: Array(5)
0: "BlueViolet"
1: "BlueViolet"
2: "BlueViolet"
3: "BlueViolet"
4: {numColorMatch: 0, numExactMatch: 0}

Не могу понять, почему он не работает?

Answer 1

Ваши данные обновляются , но они мутируют в других местах кода, и console.log не не достаточно достаточно немедленно (особенно в изолированной программной среде кода )обертка вокруг console.log).Таким образом, чтобы обойти это, выполните одно из следующих действий:

• JSON.stringify ваши данные перед передачей их на console.log.Это зафиксирует данные в строку.
• Глубокое копирование вашей структуры данных перед переходом на console.log.(Проблема в том, что нет встроенной глубокой копии для JS )
• Используйте отладчик и установите точку останова после журнала либо с помощью консоли отладчика, либо с помощью оператора debugger,(Обычно операторы debugger игнорируются, если консоль отладчика скрыта, поэтому убедитесь, что она включена).Это прервет нормальный поток и заставит журнал сбрасываться, предоставляя вам более точные данные.

Это отвечает на ваш вопрос, но не на вашу проблему, а именно на то, что вы изменяете то, чего не ожидаетек.Это можно решить, убедившись, что вы сначала (глубоко) копируете все, что мутируете, не используя мутации (библиотеки, такие как Immutable.js , могут помочь в этом), или используя что-то вроде MobX , который позволяет вам мутировать вещи и затем подписываться на эти события мутации.